CSS3詳解:border-radius

講到css3的border-radius這個玩意,可以很好玩。比如:圓角矩形,圓,橢圓等等。

CSS3 border-radius是什麼?

border-radius的含義是:圓角。

CSS3 border-radius的書寫格式:

border-radius:apx,比較常見,其中a表示數值,下同;

-webkit-border-top-left-radius:apx,類似這種的寫法還是很實用的,但一定要記住順序,一句話:先寫Y軸,再寫X軸

注意:上訴的-webkit-是兼容webkit內核的寫法,-moz-內核的寫法有所不同,如:-moz-border-radius-topleft:apx

下面我們通過幾個實例演示說明border-radius的用法:

CSS3 border-radius 圓角矩形:

.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

CSS3 border-radius 圓角矩形2:

.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}

CSS3 border-radius 圓:

.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}

CSS3 border-radius 漂亮圓角:

.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}

CSS3 border-radius 橢圓:

.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}

能做的事情很多,更多技巧靠你發掘啦!

源:http://www.daqianduan.com/css3-border-radius/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章