border-radius使用

在 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;
}

效果图如下：