极客编程技术分享
HTML5学堂：圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中，如果需要实现圆角效果，可以使用背景图的实现，但是这样会造成背景图大小和数量的增加，从而使得服务器请求次数和需要加载的代码量增加，降低加载速度。
CSS3提供了更简便快捷的属性border-radius之后，实现边框圆角就非常的简单了，而且多了很多个优点，一方面减少了图片的HTTP的请求，一方面提高了网站的性能。还有一方面就是减少代码，提高了维护性。既然CSS3圆角提供了那么多的好处，我们看看CSS3的border-radius是如何实现圆角的。我们先来看看基本语法。
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
语法中符号的含义：
length的取值范围不为负数。
“[ ]”代表“可选”
“|”代表“或”
“{}”里的数字代表属性值的数量范围
“？”代表“一次”
“*”表示可出现多次
在实现圆角之前，我们先来看几个效果，接着看CSS3圆角是如何实现的？
结构代码：
CSS样式：
效果如下：
欢迎沟通交流~HTML5学堂
Html代码：
CSS样式：
效果如下：
如上例子的圆角是如何实现的呢？之前大家回想一下，margin和padding的书写顺序。是不是四种写法，
1. margin一个值,表示盒模型的margin的上，下，左，右四个方向值
2. margin两个值,表示的是margin第一个值为margin的上,下方向值。第二个值为margin的左,右方向值。
3. margin三个值，表示的是margin第一个值为margin的上方向值。第二个值为margin的左,右方向值。第三个值为margin的下方向值.
4. Margin四个值，表示的是margin第一个值为margin的上方向值。第二个值为margin的右方向值。第三个值为margin的下方向值。第四个值为margin的左方向值.
而border-radius的书写顺序也是和margin类似，分别表示左上角、右上角、右下角、左下角。“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两边都遵循（margin四个值）的顺序原则。
1.只有一个值，那么左上角、右上角、右下角、左下角四个值相等。
2.有两个值，那么左上角等于右下角，并且取第一个值；右上角等于左下角，并且取第二个值
3.有三个值，其中第一个值是设置左上角，而第二个值是右上角、左下角，并且他们会相等,第三个值是设置右下角。
4.有四个值，其中第一个值是设置左上角。而第二个值是右上角第三个值右下角，第四个值是设置左下角。
欢迎沟通交流~HTML5学堂
为了更好的看出效果，我们给这个demo添加一点样式：
这时候在该元素上添加border-radius属性设置。
border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、GoogleChrome10.0+、Opera10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，一般加这些内核前缀的。
欢迎沟通交流~HTML5学堂
