CSS3怎麼做出圓角

來源:互聯網
上載者:User
給大家說一下css3單詞與文法結構以及CSS3圓角案例,需要的朋友可以深入研究一下,CSS3做出圓角並不困難,困難的是走出思路舉一反三。

1、圓角單詞:border-radius

2、文法結構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圓角。

4、css圓角屬性分析圖

分別對兩個DIV盒子設定圓角、一個圖片設定圓角實踐CSS3圓角。

1、案例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> <div>盒子左上方和右上方對象圓角測試</div> <div class="box">DIV盒子圓角</div> <div>盒子物件個角圓角測試</div> <div class="box3">DIV盒子圓角</div> <p>&nbsp;</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}

3、圓角案例效果

css3 對應圓角效果

div+css3布局border-radius對應圓角效果

4、案例說明

1)、第一個BOX盒子為了觀察到圓角效果所以設定了邊框樣式,同時設定圓角樣式border-radius:5px 5px 0 0;設定左上方和右上方圓角。

2)、第二個BOX3盒子設定背景色,同時設定圓角樣式border-radius:5px 0,設定左上方和右下角圓角


3)、第三個對box2盒子裡圖片img設定圓角樣式border-radius:5px,設定四個角均圓角。

CSS3做出圓角的教程就這麼多,需要的朋友可以儲存一下,也請大家持續關注本站的其他更新。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.