椭圆

自适应的椭圆
我们希望使用border-radius来达到这样一个效果：如果元素宽高相等则显示为圆；否则，显示为椭圆。
说到border-radius，有一个鲜为人知的真相：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分割这两个值即可。这个特性允许我们在拐角处创建椭圆圆角，因此，如果我们有一个尺寸为200px*150px的元素，就可以把它圆角的两个半径值指定为元素宽高的一半，从而得到一个精确的椭圆。

.shape{
            background: pink;
            width: 200px;
            height: 300px;
            /*border-radius:100px / 75px;*/
            border-radius: 50%;
        }

一个自适应的椭圆

半椭圆
border-radius不仅可以单独指定水平和垂直半径，还可以为每个角分别指定不同的值，用空格隔开（从左上顺时针指定）

.shape2{
            background: pink;
            width: 200px;
            height: 150px;
            border-radius: 0 100% 100% 0 / 50%;
        }

半椭圆
四分之一的椭圆

.shape3{
            background: pink;
            width: 200px;
            height: 150px;
            border-radius: 100% 0 0 0;
        }

四分之一的椭圆