我们知道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
