Css Secrets - 灵活的椭圆

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: [ <length> | <percentage> []](https://developer.mozilla.org...{)1,4}) [ / [ <length> | <percentage> []](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；

属性值

---

进入正题，先画个圆压压惊：

<pre>
background: #fb3;
width: 200px;height: 200px;
border-radius: 100px;
</pre>

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,那就变成了胶囊了。

所以，在宽高不一致的情况下，我们可以把角做成一个椭圆。

<pre>
border-radius: 100px / 75px;
</pre>

border-radius 接受 横向和垂直两个方向的参数，可以用 斜线（/）去分开。

<pre>
width:200px;
height:150px;
border-radius: 100px / 75px;
</pre>

这里还有一个明显的问题，我们使用了固定的数值，当内容改变导致容器尺寸改变时，我们希望border-radius也相应变化。

border-radius 接受百分数，不仅仅是具体的值。
所以，我们可以把上面的代码改写为：

<pre>
  width:200px;
  height:150px;
  border-radius:50% / 50% ;
</pre>

因为 分割线左边和 右边的半分数是一样的，所以也能合并起来：

<pre>
border-radius:50% ;
</pre>

现在我们已经知道怎么画一个椭圆了，那我们能不能画出半个椭圆呢 ？

这必须是当然的 ?。

椭圆有两个轴 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 还有很多有趣的用法，就不多说了。
最后，感谢阅读，欢迎交流，文中若有表述不准确的地方，也欢迎大力指正，就先到这，本篇结束。