如何在CSS中實現圓角邊框

一、使用border-radius屬性

想要實現圓角邊框，最常用的方法就是使用CSS的border-radius屬性。該屬性的語法如下：

border-radius: <length> | <percentage> / <length> | <percentage>;

其中，<length> 和 <percentage> 分別代表圓角半徑的長度和百分比。

舉個例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 10px;
    }
</style>
<div class="box"></div>

上述代碼就可以生成一個寬為200px，高為100px，邊框寬度為2px，圓角半徑為10px的圓角邊框。

二、不規則圓角邊框

有時候我們需要實現不規則的圓角邊框，比如只對一個角進行圓角處理，或對某個角進行不同大小的圓角處理。這時候就可以利用border-radius的四個值來實現：

border-radius: <top-left-radius> <top-right-radius> <bottom-right-radius> <bottom-left-radius>;

舉個例子：

<style>
    .box1 {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 0 20px 0 0;
    }
    .box2 {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 10px 0 0 10px;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>

上述代碼分別實現了一個只對左上角進行圓角處理，和一個左上角和左下角都有圓角處理，但圓角半徑不同的不規則圓角邊框。

三、邊框陰影實現圓角邊框

除了使用border-radius屬性，還可以使用CSS3的邊框陰影box-shadow屬性來實現圓角邊框:

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow表示陰影水平和垂直位置的偏移量，blur表示模糊程度，spread表示陰影的擴散程度，color表示陰影顏色，inset表示陰影內部。

舉個例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid transparent;
        box-shadow: 0 0 0 10px #000;
    }
</style>
<div class="box"></div>

上述代碼生成的就是一個寬為200px，高為100px，邊框寬度為10px，圓角半徑為10px的圓角邊框。

四、單邊圓角邊框

除了實現四個角的圓角邊框，還可以實現單個邊框的圓角，這時候就需要使用CSS3的偽元素:before或:after。

舉個例子：

<style>
    .box {
        width: 200px;
        height: 100px;
        border: 2px solid #000;
        position: relative;
    }
    .box:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: -2px;
        width: 20px;
        height: 20px;
        border: 2px solid #000;
        border-radius: 0 0 0 20px;
    }
</style>
<div class="box"></div>

上述代碼生成的就是一個只對左上角進行圓角處理的單邊圓角邊框。

五、實現圓形邊框

最後還可以實現圓形邊框，具體方法就是設置寬高相等，border-radius的值設置為50%。

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 2px solid #000;
        border-radius: 50%;
    }
</style>
<div class="box"></div>

上述代碼生成的就是一個寬高相等，邊框為圓形，圓心位置在正中心的圓形邊框。