[CSS揭秘]自适应的椭圆

技巧：利用border-radius属性产生圆，椭圆等形状

border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

没有继承性，适用于CSS动画。border-radius可以单独指定水平半径和垂直半径，中间用一个斜杠/分隔。

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

border-radius不仅可以接受长度值，还可以接受百分比值。这个百分比是基于元素的尺寸进行解析的，垂直半径的百分比是相对元素的高度进行解析，水平半径的百分比是相对于元素的宽度进行解析。

本质理解：border-radius是对元素的border-box进行切圆角处理，边框外侧的拐角作为切圆角的基准，边框内侧的圆角会稍微小一些。严格来说是max(0, [border-radius]-[border-width])

常规图形

1.朝上的半椭圆

 

border-radius: 50% / 100% 100% 0 0;

当某一个方向的半径为0时，另外一个方向的半径可以是任意值。

2. 朝左的半椭圆

 

border-radius: 100% / 50% 0 0 50%;

3. 四分之一的椭圆

 

border-radius: 100% 0 0 0;

 

作品欣赏

http://simurai.com/archive/buttons

展示了各种奇妙的形状

参考案例地址

play.csssecrets.io/quarter-ellipse

play.csssecrets.io/half-ellipse

play.csssecrets.io/ellipse