一、使用border-radius屬性

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

border-radius:  |  /  | ;

其中， 和 分別代表圓角半徑的長(zhǎng)度和百分比。

舉個(gè)例子：

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

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

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

border-radius:    ;

舉個(gè)例子：

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

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

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

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

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

舉個(gè)例子：

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

四、單邊圓角邊框

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

舉個(gè)例子：

上述代碼生成的就是一個(gè)只對(duì)左上角進(jìn)行圓角處理的單邊圓角邊框。

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

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

上述代碼生成的就是一個(gè)寬高相等，邊框?yàn)閳A形，圓心位置在正中心的圓形邊框。