回顾那个只能用图片展示形状的日子，之前接触前端的小伙伴们，大家一定会有颇多感触，好在现在我们可以使用纯CSS实现更多想要的形状效果，今天小编来整理一下，希望对大家有所帮助，也方便自己后期的查看。
自适应的椭圆
使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形
圆形
椭圆
在实际开发中可能更多的是让元素根据内容自动调增，而不是事先设置好宽高，因为很多时候内容是不定的。我们期望：如果宽高相等，就显示一个圆，不相等就显示一个椭圆。
上面代码实现不了，当宽度大于高度的时候，便会出现下面这种情况：
解决方案：
border-radius可以单独指定水平和垂直半径，只要用一个(/)分隔这两个值就行。还一个特性是，它可以接受长度值，还可以接受百分比，两种特性结合，就可以自适应了。
由于斜杠前后的两个值现在是一致的，可以简写
半椭圆
border-radius是一个简写属性，包含四个展开式属性，这样一来可以通过设置四个角的不同半径来达到效果。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
通过属性名字可以很清楚的知道他们用于设置哪个角。
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法就是在斜杠前指定1~4个值，斜杠后指定1~4个值。这两组值是单独展开为四个值。
比如border-radius：10px / 5px 20px,相当于10px 10px 10px 10px / 5px 20px 5px 20px;
我们要实现
弄清了，border-radius的用法，开始分析上面半椭圆的实现
这个形状是垂直对称的，意味着左上角和右上角的半径值应该相同，右下角和左下角半径也是相同
顶部边缘没有平直的部分，意味着左上角和右上角半径之和应该等于整个形状的宽度，结合上一条，左半径和右半径在水平方向上是50%。
垂直方向，顶部的两个圆角占据了整个元素的高度，而且底部没有任何圆角，因此在垂直方向上值应该好似100% 100% 0 0。
因为底部两个角的垂直圆角是零，那么他们的水平圆角是多少就完全不重要了
想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
沿纵轴劈开的半椭圆
四分之一的椭圆
创建一个四分之一椭圆，其中一个角水平和垂直半径值都需要100%，而其他三个角都不能设为圆角
就这样各种方向的椭圆效果就描绘出来了，喜欢的小伙伴可以多多支持点赞，转发哦！
后面会继续分享其他形状的具体实现。
