CSS-border-radius制作特殊图形

用法：

• 可以最多可以设置4个值，按照左上、右上、右下、左下的顺序，如果少于4个多于1个值，则先按顺序设置，然后缺失的取对角的值。

圆形

• 宽高相同
• border-radius为宽高的一半，或者直接设置50%
• div {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  }

半圆

• 宽高有一者是另一这的2倍，具体看需要哪个方向的半圆
• 设置相应边的border-radius，值为宽高中小的那个
• .top {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  }

扇形（四分之一）

• 宽高相同
• 只设置单角的border-raduis为宽高相同的大小
• .right {
  width: 100px;
  height: 100px;
  border-radius: 0 100px 0 0;
  }

椭圆

• 宽高有一者是另一这的2倍，具体看需要横还是竖的椭圆
• 分别设置水平和数值方向的border-radius（用 / 来分割，四个角的值都是一样的，所以只填一个总体值），水平方向大小与宽度相同，竖直方向大小与高度相同
• .hov {
  width: 100px;
  height: 50px;
  border-radius: 100px / 50px;
  }