首頁技術(shù)文章正文

CSS3盒子模型邊框怎樣實現(xiàn)圓角效果?

更新時間:2021-01-21 來源:黑馬程序員 瀏覽量:

在網(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ù)值,分別對應(yīng)著矩形的四個圓角(每個角包含著水平和垂直半徑參數(shù)),如圖1所示。border-radius的屬性值主要包含2個參數(shù),即水平半徑參數(shù)和垂直半徑參數(shù),參數(shù)之間用“/”隔開,參數(shù)的取值單位可以為px(像素值)或%(百分比)。

1611217549819_1.png

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

border-radius屬性同樣遵循值復(fù)制的原則,其水平半徑參數(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。示例代碼對應(yīng)效果如圖2所示。

1611217533278_2.png

圖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。示例代碼對應(yīng)效果如圖3所示。

1611217519478_3.png

圖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。示例代碼對應(yīng)效果如圖4所示。

1611217505073_4.jpg

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

需要注意的是,當應(yīng)用值復(fù)制原則設(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,使用百分比會比換算圖片的半徑更加省事。運行案例對應(yīng)的效果如圖5所示。

1611217496351_5.jpg

圖5 圓角邊框的圓形效果



猜你喜歡:

css3選擇器用法介紹[web前端培訓(xùn)]

黑馬程序員web前端視頻教程:HTML5+CSS3教程下載

CSS3顏色不透明度的設(shè)置方法【web前端】

黑馬程序員web前端培訓(xùn)課程

分享到:
在線咨詢 我要報名
和我們在線交談!