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%，而其他三个角都不能设为圆角

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

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

html中图片椭圆,CSS3技巧之形状（椭圆）相关推荐

网络推广软文浅谈网站优化过程中图片的优化技巧和注意事项！
在网站优化的过程中,网络推广软文介绍到不仅要做好关键词的优化,也更要做好图片优化,在网站不断地利用图文模式时,做好图片优化对网站的排名提升也有很大的帮助.那么对于图片优化都有哪些技巧呢?下面网络推广软 ...
css3倾斜的平行四边形,CSS3技巧之形状（平行四边形）
上一小节给大家分享了各种椭圆的实现方法,此时我们来说一下平行四边形的实现方法. 平行四边形基本变形属性transform有很多,接下来我们用到哪一个说哪一个. 我们一般用skew属性来对矩形进行斜向 ...
不规则多边形填充_花一分钟看一个案例，PPT中图片填充形状的应用
先上图,有兴趣的朝下看,没有兴趣的立即关掉页面,把时间用在感兴趣的文章上面. 简单拆解一下幻灯片: 1. 两个用图片填充了的形状,其中一个三角形,一个梯形,梯形有一部分在PPT画面边界以外,所以显示在 ...
多边形区域填充算法_花一分钟看一个案例，PPT中图片填充形状的应用
先上图,有兴趣的朝下看,没有兴趣的立即关掉页面,把时间用在感兴趣的文章上面. 简单拆解一下幻灯片: 1. 两个用图片填充了的形状,其中一个三角形,一个梯形,梯形有一部分在PPT画面边界以外,所以显示在 ...
Word图文混排中图片的高级处理技巧
Word图文混排中图片的高级处理技巧 1.插入联机图片 2.图片的处理方式 1.插入联机图片 2.图片的处理方式
关于网站中图片排名优化的技巧是？
一说到网站的优化工作,大部分的SEOer都会考虑去做网站的页面关键词优化,很多人却忽视图片的优化,更别说图片排名优化.虽然说现在的搜索引擎还不能很好的识别图片,图片站的排名也比较难做,可在实际应用当中 ...
html怎么将图片水平翻转,CSS3中如何实现图片翻转
今天将和大家分享如何利用CSS3中的知识来制作一个图片翻转的功能,CSS3中图片翻转效果主要通过设置transition过渡动画以及transform旋转动画来共同实现 [推荐课程:CSS3教程] 案 ...
html中图片的属性优化,源码中图片seo优化的技巧是什么
Seo网站站内结构优化,html中有关图片alt属性与h1标记的优化细节技巧,内蒙古网络营销师蒋元今天可大家一起来聊一下吧! SEO优化,相信大家都觉得优化的每个点都不陌生,但往往在优化过程中却忽略的 ...
C程序中图片调用技巧(程序来自潜艇大站游戏)
C程序中图片调用技巧摘要:介绍如何在C程序中调用图片,这将有助于加强C程序的界面的美观性. 关键词: VGA .BMP.13h.h.TIMER.H.Logo. 一.问题的引入: C语言使用愈来愈 ...
C程序中图片调用技巧
C程序中图片调用技巧摘要:介绍如何在C程序中调用图片,这将有助于加强C程序的界面的美观性. 关键词: VGA .BMP.13h.h.TIMER.H.Logo. 一.问题的引入: C语言使用愈来愈普及 ...

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

html中图片椭圆,CSS3技巧之形状（椭圆）相关推荐

最新文章

热门文章