CSS3的border-radius规范与圆角

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。该属性允许为元素添加圆角边框！

语法：border-radius: 1-4 length|% / 1-4 length|%

注释：

／分隔的分别是：水平半径和垂直半径。 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。 如果只设置三个值，则意味着第四个值与第二个值相同（即左下角与右上角相同）； 如果只设置两个值，则意味着第三个值与第一个值相同（即右下角与左上角相同）。

当我们为四个角都设置为相同的值30px的时候，可以简写为: border-radius:30px

  background-color:#ace;
  width:200px;
  height:200px;
  border-top-left-radius:30px;
  border-top-right-radius:30px;
  border-bottom-right-radius:30px;
  border-bottom-left-radius:30px;
等于 
  background-color:#ace;
  width:200px;
  height:200px;
  border-radius:30px;

给四个角分别设置不同的半径值，则可以得到不同的形状：

圆形

当我们给任意一个正方形设置足够大的border-radius就可以把它变成一个圆形。 
background-color:#FFF;
width:200px;
height:200px;
border-radius:100px;

实际上，如果圆角设置的长度值大于100px，仍然可以得到一个圆形。规范中指出了其中的原因：

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

椭圆
border-radius 可以单独指定水平和垂直半径，只要用／分隔两个值即可。
因此，一个200px宽 x 100px高的矩形，只要把圆角的两个半径值分别指定为元素宽高的一半，就能得到一个精准的椭圆：

background-color:#ace;
width:200px;
height:100px;
border-radius:100px/50px;

自适应椭圆
当元素的尺寸随着内容的变化而变化时，我们会希望圆角也能随着一起变化，否则的话，这个椭圆将会变形。
所以要设置一个自适应的椭圆，我们需要用到border-radius的百分比值。

这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，高度用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂直半径。 因此要创建一个自适应的椭圆，可以把这两个半径值都设置为50%。 作者：巴斯光年lip 链接：https://www.jianshu.com/p/5c1c05e4f184 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

即：

border-radius: 50% / 50%;
等同于： 
border-radius: 50%;
最终，只需要这一行代码，就可以得到一个自适应的椭圆或者正圆了。
半圆
利用border-radius属性可以画出一个标准的半圆。
  1. 首先，它是垂直对称的，这意味着 左上角和右上角的半径值应该是相同的；左下角和右下角也应该是相同的。
  2. 顶部边缘没有平直的线条，整个顶部都是曲线。这意味着左上角和右上角的半径之和等于整个形状的宽度。
  3. 左半径和右半径在水平方向上的值均是50%；底部完全没有圆角，底部的两个角的水平圆角值是多少就不重要了，因为此时水平圆角总是会被计算为0。
  4. 顶部的两个圆角占据了整个元素的高度，底部完全没有圆角，因此，在垂直方向上，合理值应该是：100% 100% 0 0 ；
它们的代码可以简写成：
  background-color:#ace;
  width:200px;
  height:100px;
  border-radius: 50%  / 100% 100% 0 0

半椭圆
如果此时画一个半椭圆是不是更简单了呢？只要元素的高度大于宽度的1/2就好了：

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

那么画一个在水平方向上对称的半圆也是同样的道理：

四分之一圆
要创建一个十分之一圆，那么其中有一个角它的水平和垂直半径值都要是100%，而其他三个角不能设置圆角。
由于这四个角它们的水平和垂直半径值都是相等的，所以不需要写斜杠和后面的数值了。

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

圆角加上阴影可以写出很多button的效果。