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

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

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

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

圖1 參數(shù)所對應的圓角

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

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

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

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

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

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

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

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

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

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

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

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

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

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

需要注意的是，當應用值復制原則設(shè)置圓角邊框時，如果“垂直半徑參數(shù)”省略，則會默認等于“水平半徑參數(shù)”的參數(shù)值。此時圓角的水平半徑和垂直半徑相等。例如設(shè)置4個參數(shù)值的示例代碼則可以簡寫為：

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

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

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

或

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

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

圖5 圓角邊框的圓形效果

猜你喜歡：

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

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

web前端：HTML5+CSS3教程下載

傳智教育web前端課程