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;

/* Safari 和 Chrome */

-moz-border-radius:10px;

/* Firefox */

border-radius:10px;

}

border-radius

CSS3 border-radius 圆角矩形2：

.demo02{

-webkit-border-radius:36px;

-moz-border-radius:36px;

border-radius:36px;

}

border-radius

CSS3 border-radius 圆：

.demo03{

height:300px;

line-height:300px;

-webkit-border-radius:300px;

-moz-border-radius:300px;

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-top-left-radius:20px;

border-bottom-right-radius:20px;

}

border-radius

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