如何在CSS中實現(xiàn)圓角邊框

一、使用border-radius屬性

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

border-radius:  |  /  | ;

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

舉個例子：

上述代碼就可以生成一個寬為200px，高為100px，邊框?qū)挾葹?px，圓角半徑為10px的圓角邊框。

二、不規(guī)則圓角邊框

有時候我們需要實現(xiàn)不規(guī)則的圓角邊框，比如只對一個角進行圓角處理，或?qū)δ硞€角進行不同大小的圓角處理。這時候就可以利用border-radius的四個值來實現(xiàn)：

border-radius:    ;

舉個例子：

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

三、邊框陰影實現(xiàn)圓角邊框

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

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

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

舉個例子：

上述代碼生成的就是一個寬為200px，高為100px，邊框?qū)挾葹?0px，圓角半徑為10px的圓角邊框。

四、單邊圓角邊框

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

舉個例子：

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

五、實現(xiàn)圓形邊框

最后還可以實現(xiàn)圓形邊框，具體方法就是設(shè)置寬高相等，border-radius的值設(shè)置為50%。

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