【CSS】椭圆、半圆、1/4圆

微信订阅号：Rabbit_svip

这次的笔记，需要有CSS圆角基础(border-radius)才能看得懂。

“当任意两个相邻圆角的半径之和超过 border box 的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠位置”

——CSS背景与边框（第三版）

【圆】

在给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形。

例如

background: #ff6600;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 正方形边长的一半 */

image.png

【椭圆】

要理解椭圆，首先要直到 border-radius 另一个鲜为人知的属性：它可以单独指定水平和垂直半径，只要用斜杠（/）分隔这两个值即可。

例如

border-radius: 100px / 60px;

如果当元素的长和宽不一样时，设置圆角半径分别是元素长和宽的一半。
例如

width: 200px;
height: 150px;
border-radius: 100px / 75px;
background: #ff6600;

image.png

但是上面的代码有一个很大的缺陷：只要元素的尺寸发生变化， border-radius 的值就得跟着改。如果只是用px来设置 border-radius 的话，是无法灵活变化的。

这时可以用百分比（%）代替 px。

width: 200px;
height: 150px;
border-radius: 50% / 50%;
background: #ff6600;

由于 border-radius 设置的两个值都相同，所以可以进一步简化

width: 200px;
height: 150px;
border-radius: 50%;
background: #ff6600;

最终得到的效果也是一样的。

【半圆 / 半椭圆】

width: 200px;
height: 200px;
border-radius: 50% / 100% 100% 0 0;
background: #ff6600;

image

半圆和半椭圆的原理是一样的。

需要调节椭圆的方向，只要稍微调整一下border-radius的值就行了。

【1/4圆】

width: 200px;
height: 200px;
border-radius: 100% 0 0 0;
background-color: #ff6600;

image