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;

}

border-radius

CSS3 border-radius 圓角矩形2：

.demo02{

-webkit-border-radius:36px;

-moz-border-radius:36px;

}

border-radius

CSS3 border-radius 圓：

.demo03{

height:300px;

line-height:300px;

-webkit-border-radius:300px;

-moz-border-radius:300px;

}

border-radius

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;

}

border-radius

CSS3 border-radius 橢圓：

.demo05{

height:300px;

-webkit-border-radius:180px;

-webkit-transform:rotatex(60deg);

}

能做的事情很多，更多技巧靠你發掘啦！