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%;

/* 这种写法表示用一个水平半径为100px，垂直半径为50px的椭圆来切割border */
border-redius:100px/50px;

.div{
  width:400px;
  height:200px;
  background: #f55;
  border-radius: 100px/50px;
}

作用原理：用一个水平宽为200px，垂直高为100px的椭圆去贴着左上角，左上角多出来（蓝色线区域）的地方就会被切去
百分比设置原理：

border-radius: 50%;
border-radius: 50%/50%;

两种写法效果是一样的，上面说到的”/”前面的一个值是椭圆的水平半径，后面的值是椭圆的垂直半径，所以前面的水平半径是相对宽度的，后面的垂直半径是相对高度的。（注意是半径）
举例：

.div{
  width: 200px;
  height: 100px;
  border-radius :25%/50%;
  background-color: brown;
}