DIVCSS3圓角單詞：border-radius
文法結構
p{border-radius:5px}
設定DIV對象盒子四個角5像素圓角效果
p{border-radius:5px 0;}
設定DIV對象盒子左上方和右下角5px圓角，其它兩個角為0不圓角
p{border-radius:5px 5px 0 0;}
設定DIV對象盒子左上方和右上方5px圓角，其它兩個角為0不圓角
說明：
border-radius:3px 4px 5px 6px
代表設定對象左上方3px圓角、右上方4px圓角、右下角5px圓角、左下角6px圓角。
CSS3圓角案例
分別對兩個DIV盒子設定圓角、一個圖片設定圓角實踐CSS3圓角。
案例HTML代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>對象圓角 線上示範 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>盒子左上方和右上方對象圓角測試</p> <p class="box">DIV盒子圓角</p> <p>盒子物件個角圓角測試</p> <p class="box3">DIV盒子圓角</p> <p> </p> <p>圖片對象圓角測試</p> <p class="box2"><img src="images/logo.gif" /></p> </body> </html>
案例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}
案例說明
1）、第一個BOX盒子為了觀察到圓角效果所以設定了邊框樣式，同時設定圓角樣式border-radius:5px 5px 0 0;設定左上方和右上方圓角。
2）、第二個BOX3盒子設定背景色，同時設定圓角樣式border-radius:5px 0，設定左上方和右下角圓角
3）、第三個對box2盒子裡圖片img設定圓角樣式border-radius:5px，設定四個角均圓角。
關於border-radius的知識就這麼多，感興趣的朋友可以自己動手操作一下，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS裡怎麼使用border-radius
html的編輯轉換器
HTML裡空白字元怎麼輸入
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
