CSS - 圓角

CSS 圓角是使用 **border-radius** 屬性建立的。此屬性允許您指定元素外邊框邊緣角的圓角半徑。

邊框半徑的值型別

**長度 (以 px、em 等為單位)**：指定角的圓度半徑。負值無效。
**百分比 (%)**：以元素總寬度或高度的百分比指定圓度。百分比值用於尺寸變化的元素。

CSS 邊框半徑示例

下面的示例程式碼演示瞭如何使用 **border-radius** 屬性為盒子的四個角建立圓角

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box {
            width: 200px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="rounded-box">
        This is a rounded corner box.
    </div>
</body>
</html>

單個角的邊框半徑

**border-radius** 屬性可用於分別為元素的每個角應用不同的半徑值。這樣可以為元素的不同側面建立獨特的圓角。

**border-top-left-radius**：此屬性用於設定元素左上角的半徑。
**border-top-right-radius**：此屬性用於設定元素右上角的半徑。
**border-bottom-right-radius**：此屬性用於設定元素右下角的半徑。
**border-bottom-left-radius**：此屬性用於設定元素左下角的半徑。

您可以檢視附加的圖片，以更清晰地瞭解各個角的半徑。

示例

在此示例中，我們建立了四個不同的元素，並使用上述屬性為每個元素的各個角應用了 `border-radius` 屬性。

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: lightblue;
            border: 1px solid black;
            padding: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h3>CSS Border Radius</h3>
    <div style="border-top-left-radius: 20px;">
        CSS Border Top-Left Radius
    </div>

    <div style="border-top-right-radius: 20px;">
        CSS Border Top-Right Radius
    </div>

    <div style="border-bottom-right-radius: 20px;">
        CSS Border Bottom-Right Radius
    </div>

    <div style="border-bottom-left-radius: 20px;">
        CSS Border Bottom-Left Radius
    </div>
</body>

</html>

應用邊框半徑的方法

有四種方法可以為 CSS **border-radius** 屬性提供值。所有這些方法都已在下面提到並描述，並附有完整的示例程式碼。

**單個值：**您可以為 `border-radius` 屬性提供單個值，該值將統一應用於元素的四個角。
**兩個值：**在這裡，您提供兩個值來定義角的水平和垂直半徑，以左上到右下的順序應用。
**三個值：**您可以提供三個值，第一個值用於左上角，第二個值用於右上角和左下角，第三個值用於右下角。
**四個值：**提供四個值將按以下順序將每個值應用於特定角：左上、右上、右下和左下。

語法

border-radius: "value" // Single Value
border-radius: "value value" // Two Values
border-radius: "value value value" // Three Values
border-radius: "value value value value" // Four Values

示例

在下面的示例中，我們建立了四個不同的元素，並使用內聯 CSS 以不同的方式應用 `border-radius` 屬性。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Border Radius</title>
    <style>
        div {
            background-color: lightblue;
            border: 1px solid black;
            width: 200px;
            height: 100px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 100px;
        }
        
        span {
            display: block;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h3>CSS Border Radius</h3>
    <div style="border-radius: 20px">
        <span>Single Value</span>
    </div>

    <div style="border-radius: 20px 40px">
        <span>Two Values</span>
    </div>

    <div style="border-radius: 20px 40px 60px">
        <span>Three Values</span>
    </div>

    <div style="border-radius: 20px 40px 60px 80px">
        <span>Four Values</span>
    </div>
</body>

</html>

建立圓形和橢圓形

我們可以透過將 border-radius 屬性設定為 50% 來建立圓形和橢圓形。如果尺寸（高度和寬度）相等，則結果為圓形，否則結果為橢圓形。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            border-radius: 50%;
        }
        .ellipse {
            width: 200px;
            height: 100px;
            background-color: pink;
            text-align: center;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="circle">
        circle
    </div>
    <div class="ellipse">
        ellipse
    </div>
</body>

</html>

CSS 圓角圖片

您可以使用 **border-radius** 屬性為影像建立不同的圓角樣式。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            width: 100px;
            height: 100px;
            margin: 10px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <h4>Round Cornered Image.</h4>
        <img src="/css/images/tree.jpg" />

    <h4>Circular Image</h4>
        <img style="border-radius: 50%" src="/css/images/tree.jpg" />

    <h4>Elliptical Image</h4>
        <img style="border-radius: 50%; height: 50px;" 
             src="/css/images/tree.jpg" />
</body>

</html>

CSS 邊框半徑所有屬性

以下是與 border-radius 相關的 CSS 屬性列表

屬性	描述	示例
border-top-left-radius	設定元素邊框左上角的圓度。	試試看
border-top-right-radius	設定元素邊框右上角的圓度。	試試看
border-bottom-right-radius	設定元素邊框右下角的圓度。	試試看
border-bottom-left-radius	設定元素邊框左下角的圓度。	試試看

列印頁面