CSS3之border-radius圓角 DIV盒子圓角 圖片圓角,CSS3樣式實(shí)現(xiàn)盒子對象圓角、圖片圓角效果。div css3 border-radius圓角樣式教程篇。
一、CSS3之border-radius圓角
1、DIVCSS3圓角單詞：
border-radius |
2、語法結(jié)構(gòu)
div{border-radius:5px}
|
設(shè)置DIV對象盒子四個角5像素圓角效果
div{border-radius:5px 0;}
|
設(shè)置DIV對象盒子左上角和右下角5px圓角，其它兩個角為0不圓角
div{border-radius:5px 5px 0 0;}
|
設(shè)置DIV對象盒子左上角和右上角5px圓角，其它兩個角為0不圓角
3、說明：
border-radius:3px 4px 5px 6px |
代表設(shè)置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。
4、css圓角屬性分析圖
CSS3 border-radius圓角結(jié)構(gòu)分析圖
二、CSS3圓角案例
DIVCSS5分別對兩個DIV盒子設(shè)置圓角、一個圖片設(shè)置圓角實(shí)踐CSS3圓角。
1、案例HTML代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>對象圓角 在線演示 DIVCSS5 VIP</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子左上角和右上角對象圓角測試</div> <div class="box">DIV盒子圓角</div> <div>盒子對象個角圓角測試</div> <div class="box3">DIV盒子圓角</div> <p> </p> <div>圖片對象圓角測試</div> <div class="box2"><img src="images/divcss5-logo.gif" /></div> </body> </html> |
2、案例CSS代碼：
.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto}
.box2 img{border-radius:5px}
.box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}
|
3、圓角案例效果截圖
4、案例說明
1）、第一個BOX盒子為了觀察到圓角效果所以設(shè)置了邊框樣式，同時(shí)設(shè)置圓角樣式border-radius:5px 5px 0 0;設(shè)置左上角和右上角圓角。
2）、第二個BOX3盒子設(shè)置背景色，同時(shí)設(shè)置圓角樣式border-radius:5px 0，設(shè)置左上角和右下角圓角
3）、第三個對box2盒子里圖片img設(shè)置圓角樣式border-radius:5px，設(shè)置四個角均圓角。
