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

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

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

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

圖1 參數所對應的圓角

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

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

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

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

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

圖2 2個參數值的圓角邊框

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

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

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

圖3 3個參數值的圓角邊框

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

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

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

圖4 4個參數值的圓角邊框

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

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

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

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

或

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

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

圖5 圓角邊框的圓形效果

猜你喜歡：

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

CSS3如何設置顏色不透明度？

web前端：HTML5+CSS3教程下載

傳智教育web前端課程