盒子模型的圓角邊框怎樣實(shí)現(xiàn)？

在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)看到一些圓角的圖形，如按鈕、頭像圖片等，運(yùn)用CSS3中的border-radius屬性可以將矩形邊框四角圓角化，實(shí)現(xiàn)圓角效果。border-radius屬性基本語(yǔ)法格式如下。

border-radius:水平半徑參數(shù)1 水平半徑參數(shù)2 水平半徑參數(shù)3 水平半徑參數(shù)4/垂直半徑參數(shù)1 垂直半徑參數(shù)2 垂直半徑參數(shù)3 垂直半徑參數(shù)4;

在上面的語(yǔ)法格式中，水平和垂直半徑參數(shù)均有4個(gè)參數(shù)值，分別對(duì)應(yīng)著矩形的四個(gè)圓角（每個(gè)角包含著水平和垂直半徑參數(shù)），如圖1所示。border-radius的屬性值主要包含2個(gè)參數(shù)，即水平半徑參數(shù)和垂直半徑參數(shù)，參數(shù)之間用“/”隔開(kāi)，參數(shù)的取值單位可以為px(像素值)或%(百分比)。

圖1 參數(shù)所對(duì)應(yīng)的圓角

border-radius屬性同樣遵循值復(fù)制的原則，其水平半徑參數(shù)和垂直半徑參數(shù)均可以設(shè)置1~4個(gè)參數(shù)值，用來(lái)表示四角圓角半徑的大小，具體解釋如下。

● 水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置1個(gè)參數(shù)值時(shí)，表示四角的圓角半徑均相同；

● 水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置2個(gè)參數(shù)值時(shí)，第1個(gè)參數(shù)值代表左上圓角半徑和右下圓角半徑，第2個(gè)參數(shù)值代表右上和左下圓角半徑，具體示例代碼如下。

img{border-radius:50px 20px/30px 60px;}

在上面的示例代碼中設(shè)置圖像左上和右下圓角水平半徑為50px，垂直半徑為30px，右上和左下圓角水平半徑為20px，垂直半徑為60px。示例代碼對(duì)應(yīng)效果如圖2所示。

圖2 2個(gè)參數(shù)值的圓角邊框

● 水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置3個(gè)參數(shù)值時(shí)，第1個(gè)參數(shù)值代表左上圓角半徑，第2個(gè)參數(shù)值代表右上和左下圓角半徑；第3個(gè)參數(shù)值代表右下圓角半徑，具體示例代碼如下。

img{border-radius:50px 20px 10px/30px 40px 60px;}

在上面的示例代碼中設(shè)置圖像左上圓角的水平半徑為50px，垂直半徑為30px；右上和左下圓角水平半徑為20px，垂直半徑為40px；右下圓角的水平半徑為10px，垂直半徑為60px。示例代碼對(duì)應(yīng)效果如圖3所示。

圖3 3個(gè)參數(shù)值的圓角邊框

● 水平半徑參數(shù)和垂直半徑參數(shù)設(shè)置4個(gè)參數(shù)值時(shí)，第1個(gè)參數(shù)值代表左上圓角半徑，第2個(gè)參數(shù)值代表右上圓角半徑，第3個(gè)參數(shù)值代表右下圓角半徑，第4個(gè)參數(shù)值代表左下圓角半徑，具體示例代碼如下。

img{border-radius:50px 30px 20px 10px/50px 30px 20px 10px;}

在上面的示例代碼中設(shè)置圖像左上圓角的水平垂直半徑均為50px，右上圓角的水平和垂直半徑均為30px，右下圓角的水平和垂直半徑均為20px，左下圓角的水平和垂直半徑均為10px。示例代碼對(duì)應(yīng)效果如圖4所示。

圖4 4個(gè)參數(shù)值的圓角邊框

需要注意的是，當(dāng)應(yīng)用值復(fù)制原則設(shè)置圓角邊框時(shí)，如果“垂直半徑參數(shù)”省略，則會(huì)默認(rèn)等于“水平半徑參數(shù)”的參數(shù)值。此時(shí)圓角的水平半徑和垂直半徑相等。例如設(shè)置4個(gè)參數(shù)值的示例代碼則可以簡(jiǎn)寫(xiě)為：

img{border-radius:50px 30px 20px 10px;}

值得一提的是，如果想要設(shè)置例5-9中圖片的圓角邊框顯示效果為圓形，只需第9行代碼更改為：

img{border-radius:150px;}     /*設(shè)置顯示效果為圓形*/

或

img{border-radius:50%;}      /*利用%設(shè)置顯示效果為圓形*/

由于案例中圖片的寬高均為300像素，所以圖片的半徑是150px，使用百分比會(huì)比換算圖片的半徑更加省事。運(yùn)行案例對(duì)應(yīng)的效果如圖5所示。

圖5 圓角邊框的圓形效果

猜你喜歡：

CSS3新增了哪些選擇器？如何是使用？

CSS3如何設(shè)置顏色不透明度？

web前端：HTML5+CSS3教程下載

傳智教育web前端課程