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%。
即：
border-radius: 50% / 50%;
等同于：
border-radius: 50%;
最终，只需要这一行代码，就可以得到一个自适应的椭圆或者正圆了。
半圆
利用border-radius属性可以画出一个标准的半圆。
- 首先，它是垂直对称的，这意味着
左上角和右上角的半径值应该是相同的；左下角和右下角也应该是相同的。 - 顶部边缘没有平直的线条，整个顶部都是曲线。这意味着
左上角和右上角的半径之和等于整个形状的宽度。 - 左半径和右半径在水平方向上的值均是50%；底部完全没有圆角，底部的两个角的水平圆角值是多少就不重要了，因为此时水平圆角总是会被计算为0。
- 顶部的两个圆角占据了整个元素的高度，底部完全没有圆角，因此，在垂直方向上，合理值应该是：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
那么画一个在水平方向上对称的半圆也是同样的道理：
background-color:#ace;
width:200px;
height:150px;
border-radius: 100% 0 0 100% / 50%
四分之一圆
要创建一个十分之一圆，那么其中有一个角它的水平和垂直半径值都要是100%，而其他三个角不能设置圆角。由于这四个角它们的水平和垂直半径值都是相等的，所以不需要写斜杠和后面的数值了。
background-color:#ace;
width:200px;
height:150px;
border-radius: 100% 0 0 0
*圆角加上阴影可以写出很多button的效果。
参考书籍：Lea Verou《CSS揭秘》
网友评论