溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css3單詞與語法結(jié)構(gòu)實例分析的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css3單詞與語法結(jié)構(gòu)實例分析文章都會有所收獲，下面我們一起來看看吧。
1、DIVCSS3圓角單詞：
border-radius
2、語法結(jié)構(gòu)
div{border-radius:5px}設置DIV對象盒子四個角5像素圓角效果
div{border-radius:5px 0;}設置DIV對象盒子左上角和右下角5px圓角，其它兩個角為0不圓角
div{border-radius:5px 5px 0 0;}設置DIV對象盒子左上角和右上角5px圓角，其它兩個角為0不圓角
3、說明：
border-radius:3px 4px 5px 6px
代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。
DIVCSS5分別對兩個DIV盒子設置圓角、一個圖片設置圓角實踐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" /> <!-- www.億速云.com --> </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/億速云-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}4、案例說明
1）、第一個BOX盒子為了觀察到圓角效果所以設置了邊框樣式，同時設置圓角樣式border-radius:5px 5px 0 0;設置左上角和右上角圓角。
2）、第二個BOX3盒子設置背景色，同時設置圓角樣式border-radius:5px 0，設置左上角和右下角圓角
3）、第三個對box2盒子里圖片img設置圓角樣式border-radius:5px，設置四個角均圓角。
關于“css3單詞與語法結(jié)構(gòu)實例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css3單詞與語法結(jié)構(gòu)實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
