CSS基礎學習十六：CSS盒子模型補充之border-radius屬性 · Web前端HTML+CSS+JS初級入門

CSS盒子模型有很多的內容和屬性，CSS也一直在更新和新增屬性，今天我們來說說CSS3新增的盒子模型中的邊框中的內容，也就是border-radius屬性。 border-radius屬性設置元素的邊框添加圓角，其實沒有邊框也可以添加圓角效果。但是要是顯示出來，就必須增加背景色或者邊框。可能的值：xpx；圓角是xpx，半徑為xpx的四分之一圓。語法格式為： border-radius:apx bpx cpx dpx; 順時針。當a=b=c=d，寫為：border-radius:apx; 這樣看起來很抽象，還是拿例子來說明實例一：沒有邊框，有背景色的div，給其增加邊框圓角屬性 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS演示</title> <style type="text/css"> #test { width:300px; height:200px; background-color:#FFFF00; border-radius:10px; line-height:200px;/*設置行高相同，便于居中*/ text-align:center; } </style> </head> <body> <div id="test">攻城課堂</div> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559980e88.jpg) 實例二：有綠色實線2像素的邊框，有背景色的div，給其增加邊框圓角屬性 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS演示</title> <style type="text/css"> #test { width:300px; height:200px; background-color:#FFFF00; border:#00FF00 solid 2px;/*增加的邊框*/ border-radius:10px; line-height:200px;/*設置行高相同，便于居中*/ text-align:center; } </style> </head> <body> <div id="test">攻城課堂</div> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215599955e5.jpg) 我們在瀏覽的大多數網頁中肯定會看到過許多各種各樣的圓角的圖片，有許多并不是經過PS處理過的，那么多的圖片我們也不可能一張一張去切割和處理，因此我們可以利用盒子模型的border-radius屬性進行樣式設計，會達到意想不到的效果，而且還會很方便和簡潔。那我們來看實例。實例三：給下面兩張圖片其中的一張圖片添加圓角屬性，請區別兩張效果的不同 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS演示</title> <style type="text/css"> img { display:block; margin-top:50px; width:450px; height:300px; } #img_1 { border-radius:15px; } </style> </head> <body> <img src="10.jpg" /> <hr/> <img id="img_1" src="10.jpg" /> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215599a8087.jpg) 我們在瀏覽網頁的時候還會看到一些圓形的圖片，這個也很好實現，就將border-radius的屬性的值設置為圖片高度和寬度的一半即可。可以是正方形的，也可以是矩形的。實例四：設置一張圖片為圓形 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS演示</title> <style type="text/css"> img { display:block; width:300px; height:300px; } #img_1 { border-radius:150px; } </style> </head> <body> <img src="6.jpg" /> <hr/> <img id="img_1" src="6.jpg" /> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215599c140f.jpg) 當然，我們也可以進行單個圓角的設置，這個就不再過多的演示了，如果我們要求各個邊角都不相同，可以使用下面的屬性進行設置： ![](https://box.kancloud.cn/2016-04-28_57215599dd0cd.jpg) border-top-left-radius:表示左上角 border-top-right-radius:表示右上角 border-bottom-right-radius:表示左下角 border-bottom-left-radius:表示右下角我們找個圖來看看效果：同時也要設置各個邊框的寬度和顏色的不同只給出CSS代碼： ~~~ .demo { border-color: red green blue orange; border-width: 15px 30px 30px 80px; border-radius: 50px; } ~~~ 效果圖： ![](https://box.kancloud.cn/2016-04-28_57215599ece2b.jpg)