border-radius 的使用方法
现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。
border-radius 是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
1、只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
2、有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值
3、有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
4、有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
前面，我们主要看了 border-radius 的缩写格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
.demo {
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
跟
.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}是一样的.