CSS - border-end-end-radius 屬性

CSS border-end-end-radius 屬性定義了元素的塊級結尾和內聯結尾邊之間角的圓角半徑。此屬性是邏輯邊框半徑，這意味著它的值取決於元素的書寫模式、方向和文字方向。

語法

border-end-end-radius: 0 | length | percentage | initial | inherit;

屬性值

值	描述
0	沒有圓角效果。預設值。
長度值	使用長度值定義塊級結尾和內聯結尾角的圓度。
百分比	使用百分比值定義塊級結尾和內聯結尾角的圓度。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS border-end-end-radius 屬性示例

以下示例說明了使用不同值的 border-end-end-radius 屬性。

值為零的 border-end-end-radius

為了在塊級和內聯角的末尾不產生任何圓角效果，可以使用 0。在以下示例中，使用了 0 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 0;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <div class="rounded-box">
        No rounded corner for block-end and inline-end corner.
    </div>
</body>

</html>

使用長度值的 border-end-end-radius

為了在塊級和內聯角的末尾產生圓角效果，可以使用長度值（例如 10px）來指定半徑。在以下示例中，使用了 80px 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box1 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 80px;
        }

        .rounded-box2 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 80px 80px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p class="rounded-box1">
        Rounded corner for block-end and inline-end 
        corner with single value.
    </p>
    <p class="rounded-box2">
        Rounded corner for block-end and inline-end 
        corner with two values.
    </p>
</body>

</html>

使用百分比值的 border-end-end-radius

為了在塊級和內聯角的末尾產生圓角效果，可以使用百分比值（例如 10%）來指定半徑。在以下示例中，使用了 50% 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box1 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 50%;
        }

        .rounded-box2 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 50% 50%;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p class="rounded-box1">
        Rounded corner for block-end and inline-end 
        corner with single value.
    </p>
    <p class="rounded-box2">
        Rounded corner for block-end and inline-end 
        corner with two values.
    </p>
</body>

</html>

帶有方向的 border-end-end-radius

在 border-end-end-radius 的上下文中，direction 引數決定要圓哪個角。在 LTR 方向上，右下角是圓的，而在 RTL 方向上，左下角是圓的。LTR 是預設方向。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        #right {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 120px 60px;
            direction: ltr;
        }

        #left {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 120px 60px;
            direction: rtl;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p id="right">
        block-end and inline-end rounded 
        corner using direction: ltr
    </p>
    <p id="left">
        block-end and inline-end rounded 
        corner using direction: rtl
    </p>
</body>

</html>

帶有書寫模式的 border-end-end-radius

border-end-end-radius 屬性可以與 writing-mode: vertical-lr 一起使用，它將文字垂直排列為從上到下，從左到右。類似地，使用 writing-mode: vertical-rl，它將文字垂直排列為從上到下，從右到左。這些在以下示例中顯示。

示例

<html>
<head>
<style>
    .rounded-box {
        width: 150px;
        height: 150px;
        border: 3px solid green;
        margin: 10px;
    }
    .top-left-lr {
        border-end-end-radius: 30%;
        writing-mode: vertical-lr;
    }
    .top-left-rl {
        border-end-end-radius: 30%;
        writing-mode: vertical-rl;
    }
</style>
</head>
<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <div class="rounded-box top-left-lr">
        block-end and inline-end rounded 
        corner using vertical-lr.
    </div>
    <div class="rounded-box top-left-rl">
        block-end and inline-end rounded 
        corner using vertical-rl.
    </div>
</body>
</html>

支援的瀏覽器

屬性
border-end-end-radius	89.0	89.0	66.0	15.0	75.0

css_properties_reference.htm

列印頁面