摘要：顾名思义，灵活的椭圆。椭圆，是我们今天的主角。所以，在宽高不一致的情况下，我们可以把角做成一个椭圆。接受百分数，不仅仅是具体的值。椭圆有两个轴轴，四个角。分别是给它们赋予不同的值就可以实现很多奇妙的图形。
Flexible ellipses
顾名思义，灵活的椭圆。
椭圆，是我们今天的主角。
拿它用来做什么呢？?，对了，拿它做圆角。
border-radius,这是个 简单，实用的属性，我们先对它进行一个小小的回顾.
border-radius :
用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。
border-radius.png
即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。
这是一个简写属性，用来设置
[border-top-left-radius
](https://developer.mozilla.org...
[border-top-right-radius
](https://developer.mozilla.org...
[border-bottom-right-radius
](https://developer.mozilla.org... ，
[border-bottom-left-radius
](https://developer.mozilla.org...。
用法和其他简写属性类似，无法为个别值设定为继承，如 border-radius:0 0 inherit inherit，这会覆盖一部分现有定义。在这种情况下只能使用完整属性来指定。
Formal syntax: [
| []](https://developer.mozilla.org...{)1,4}) [ / [ | []](https://developer.mozilla.org...{)1,4}) []](https://developer.mozilla.org...?) 半径的第一个语法取值可取1~4个值:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left
半径的第二个语法取值也可取1~4个值 :
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
border-radius: inherit；
属性值进入正题，先画个圆压压惊：
background: #fb3;
width: 200px;height: 200px;
border-radius: 100px;
border-radius: 100px;
你或许已经发现了，这里设置的值，只要大于等于边的一半就可以了，但到底是为什么呢？
我们看官网的一段描述：
“When the sum of any two adjacent border radii exceeds the size of theborder box, user agents must proportionally reduce the used values of allborder radii until none of them overlap.”
—CSSBackgrounds & Borders Level 3
这段话的意思是，如果相邻的border-radius 值的和超过了border-box 的范围, 那么 用户代理就会相应的减小所有的border-radius 的值，直到它们中的任何一个都不发生重叠。
通常情况下，我们不会给一个元素固定的宽高，因为我们想根据内容去自适应，最终的尺寸我们是不知道的。即使我们要做的是一个静态网站，并且内容是固定的，这样我们可以确定它的尺寸。即使以后某一天，我们想进行一些修改，也可以修改字号来实现同样的尺寸。
在之前的例子中，我们画了一个圆，但是如果宽度变大一些，比如150px,那就变成了胶囊了。
所以，在宽高不一致的情况下，我们可以把角做成一个椭圆。
border-radius: 100px / 75px;
border-radius 接受 横向和垂直两个方向的参数，可以用 斜线（/）去分开。
width:200px;
height:150px;
border-radius: 100px / 75px;
这里还有一个明显的问题，我们使用了固定的数值，当内容改变导致容器尺寸改变时，我们希望border-radius也相应变化。
border-radius 接受百分数，不仅仅是具体的值。
所以，我们可以把上面的代码改写为：
width:200px; height:150px; border-radius:50% / 50% ;
因为 分割线左边和 右边的半分数是一样的，所以也能合并起来：
border-radius:50% ;
现在我们已经知道怎么画一个椭圆了，那我们能不能画出半个椭圆呢 ？
这必须是当然的 ?。
椭圆有两个轴 x,y 轴，四个角。
分别是：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
给它们赋予不同的值就可以实现很多奇妙的图形。
以这个图形为例：
它是水平对称的，所以它的
top-left-radius 和 bottom-left-radius 应该是一样的，
top-right-raidus 和bottom-right-radius 也应该是一样的：
代码：
width: 8em; height: 8em; background-color: #fb3; border-top-left-radius: 100% 50%; border-top-right-radius: 0px 50%; border-bottom-right-radius: 0px 50%; border-bottom-left-radius: 100% 50%;
可以简写为：
border-radius: 100% 0 0 100% / 50%;
知道这个，就让我们愉快的玩耍吧：
我们可以这样：
border-radius: 100% 100% 100% 0 / 100% 100% 100% 0;
可以这样：
border-radius: 100% 0 0 0;
这样：
border-radius: 100% 0 / 50% 0;
也可以这样：
或者也可以放大招：
这是设计师 simurai设计的，很好玩吧，为了方便访问，我把它拿了下来，戳这里查看。
这是他在css conf 上的一个演讲，Styling with STRINGS ，挺有趣的，有兴趣的同学可以看一下。
//每次结尾都不知道说什么 ＝ ＝
border-radius 还有很多有趣的用法，就不多说了。
最后，感谢阅读，欢迎交流，文中若有表述不准确的地方，也欢迎大力指正，就先到这，本篇结束。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116445.html
摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...
摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...
摘要：自适应的椭圆利用生成椭圆。参考手册椭圆对一个宽度和高度不同的容器进行如下设置，就得到一个椭圆半椭圆是一个简写属性。分别对应着而实用斜线可以单独指定水平半径和垂直半径。 自适应的椭圆 利用border-radius生成椭圆。CSS参考手册 椭圆 对一个宽度和高度不同的容器进行如下设置，就得到一个椭圆border-radius: 50% showImg(https://segmentfau...
摘要：同样的方法可以实现下面这种布局具体代码如下通过把改成或，就可以立即得到左侧倾斜或右侧倾斜的标签页。简单的饼图的绘制思路是把圆形的左右两部分指定为上述两种颜色，然后用伪元素覆盖上去，通过旋转来决定露出多大的扇区。 自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不...
摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。 前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...
阅读 2626·2021-11-22 09:34
阅读 976·2021-11-19 09:40
阅读 3120·2021-10-14 09:43
阅读 3446·2021-09-23 11:22
阅读 1485·2021-08-31 09:39
阅读 657·2019-08-30 15:55
阅读 1243·2019-08-30 15:54
阅读 725·2019-08-30 15:53
