html中图片椭圆,CSS3技巧之形状（椭圆）

回顾那个只能用图片展示形状的日子，之前接触前端的小伙伴们，大家一定会有颇多感触，好在现在我们可以使用纯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%，而其他三个角都不能设为圆角

就这样各种方向的椭圆效果就描绘出来了，喜欢的小伙伴可以多多支持点赞，转发哦！

后面会继续分享其他形状的具体实现。