我们知道border-radius允许您为元素添加圆角边框！
而border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
先看个例子。
如果将有个正方形元素设置一个border-radius值为边长的一半，则可以得到一个圆形。
width: 200px;height: 200px;border-radius: 100px;background: brown;效果图：
这里宽高是固定的且相等，如果宽高不相等则显示为一个椭圆。
宽高不等效果图：
自适应椭圆
由于根据实际情况出发，我们希望它能根据实际的内容自动调整并适应。
解决方案：
一个鲜为人知的秘密，border-radius可以单独设置水平和垂直的半径，只需要用一个斜杠（/）分隔这二个值就行。此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。
width: 150px;height: 100px;border-radius: 50%/50%; //简写属性：border-radius:50%
background: brown;只需这一行简单的代码就可以完成自适应的椭圆了。很神奇吧。
半椭圆
我们知道border-radius是个简写属性，它得展开式：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-botom-left-radius
这四个字如上的顺序，从左上角开始顺时针应用到元素其他三个角上。
但是真正简介的写法还是使用border-radius这个简写属性，只需对应上面的规则，用空格分开多个值，也能达到展开式的效果。
如果只提供了三个值：1 2 3 则第4个值和第2个值相同。如果只提供了二个值：1 2 则1 3相同，2 4值相同。
我们甚至可以为四个角设置不同的水平和垂直半径，方法就是在斜杠前指定一到四个值，斜杠后指定一到四个值。
width: 150px;height: 100px;border-radius: 50%/0 0 100% 100%;background: brown;
变换一下：
width: 150px;height: 100px;border-radius: 50%/100% 100% 0 0;background: brown;
来一个小红帽：
width: 150px;height: 100px;border-radius: 50%/50% 50% 0 0;background: brown;
width: 150px;height: 100px;border-radius: 100% 0 0 100%/ 50%;background: brown;//沿着纵轴切开的椭圆
同理，可以得出：
width: 150px;height: 100px;border-radius: 0 100% 100% 0/ 50%;background: brown;
四分之一的椭圆
那么，有办法得到四分之一椭圆呢？我们从效果图看出，创建一个四分之一的椭圆，只要一个角的水平和垂直半径值都需要是100%，
而其他三个角都不能设圆角。因为四个角的水平和垂直半径方向上是相同的，所以不需要用斜杠语法了。
所以
width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;效果如下：
