在 CSS3 中，border-radius 属性用于创建圆角
用法：
/* 只设置一个角的写法 */
border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角
/* 同时设置四个角 */
/* 顺序是 左上-右上-右下-左下 */
border-radius: 20px 10px 10px 20px;
/* 四个角设置统一值可以只写一次 */
border-radius: 20px;
/* 设置两个值 */
/* 第一个值控制左上和右下两个角，第二个值控制右上和左下两个角 */
border-radius: 20px 10px;
/* 设置三个值*/
/* 第一个值控制左上角，第二个值控制右上和左下两个角，第三个值控制右下角 */
border-radius: 20px 10px 20px;
/* 除了用固定值还可以用百分比 */
border-radius: 50%;
除了上面的方法，还有一种设置方法
border-redius:100px/50px;
这种写法表示用一个水平半径为100px，垂直半径为50px的椭圆来切割border
栗子：
.div{
width:400px;
height:200px;
background: #f55;
border-radius: 100px/50px;
}
作用原理：用一个水平宽为200px，垂直高为100px的椭圆去贴着左上角，左上角多出来（蓝色线区域）的地方就会被切去
四个角都被切掉后，变成下面这样
我们可以使用这个方法来设置椭圆
还是上面这个宽400px，高200px的矩形，设置border-radius:200px/100px；即可得到一个椭圆
百分比设置原理：
border-radius: 50%;
border-radius: 50%/50%;
两种写法效果是一样的，上面说到的”/”前面的一个值是椭圆的水平半径，后面的值是椭圆的垂直半径，所以前面的水平半径是相对宽度的，后面的垂直半径是相对高度的。（注意是半径）
栗子：
.div{
width: 200px;
height: 100px;
border-radius :25%/50%;
background-color: brown;
}
效果图如下：
