本文主要是介绍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/
这篇关于CSS3详解：border-radius的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
