1. border-radius

border-radius 可以为元素添加圆角边框，比如 按钮。

2. 兼容性： IE9+以上都很好地能够兼容 border-radius

3. border-radius 绘制圆形

如果我们给一个正方形的元素设置一个足够大的border-radius值（只要大于等于正方形边长的一半）的话，就可以被这个元素变成圆形。 但考虑到元素的高宽可能不是固定的，那么，我们可以设置百分比，这个百分比是基于元素的尺寸大小来解析的。当我们给一个正方形的元素设置border-radius：50%时，我们会得到一个自适应的圆形。

    width:200px;
    height:200px;
    border-radius:50%; /*在这里等价于border-radius:100px; 建议写成百分比*/

如下所示：

4. border-radius 绘制自适应椭圆

当元素的高宽不相等时，我们来看下会变成什么样子。

    width:300px; /*宽度变长了*/
    height:200px;
    border-radius:50%;

如下所示：

如上图所示，当元素的高宽不相等，border-radius 设置为 50%，我们将会得到一个自适应的椭圆。

5. border-radius 绘制半个椭圆

如果想要得到半个椭圆，怎么办呢？

我们需要补充以下两个知识点：

  • 1.border-radius的值是可以单独指定水平方向上的半径和垂直方向上的半径的，中间需要用一个斜杠(/)分隔开两个值。

  • 2.border-radius是一个简写属性，我们可以单独为元素的每个角指定不同的值。border-radius 展开的话是以下4个属性：

    border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius

我们不必分开写，可以给border-radius指定4个值，用空格分开。浏览器解析的时候，是按顺时针顺序应用到元素的四个角的（和margin、padding等其他的常见属性的简写类似）。

我们来分析一下这个半椭圆形。

  • 1.它是垂直对称的，说明左上角和右上角的半径值是相同的；左下角和右下角的半径值也应该是相同的。

  • 2.它的顶部边缘是曲线的，说明左上角和右上角的半径值之和应该是等于这个元素的宽的。

  • 3.由前面两点可以推出，左上角和右上角的半径在水平方向上是50%。

  • 4.再看垂直方向上，顶部的两个圆角占据了整个元素的高度，而底部完全没有任何圆角。因此，可以推断左上角和右上角的半径在垂直方向上是100%，左下角和右下角在垂直方向上是0。

综上所述，border-radius的值应该是50% / 100% 100% 0 0;

    width:300px;
    height:100px;
    border-radius: 50% / 100% 100% 0 0;

如果我们把垂直方向上的值改为0 0 100% 100%，则可以得到另一个半椭圆。

    width:300px;
    height:100px;
    border-radius: 50% /0 0 100% 100% ;

如果把水平方向border-raduis设置为50%; 垂直方向上，左上角和左下角设置为100%； 右上角和右下角设为0，则可以得到一个沿Y轴劈开的半椭圆形。

    width:150px;
    height:200px;
    border-radius: 100% 0 0 100% / 50%;

6.border-radius 绘制椭圆的四分之一

如果想要得到四分之一个椭圆呢？顺着之前的思路，我们可以设置其中一个角的border-radius值为100%，其他三个角为0.

    width:150px;
    height:100px;
    border-radius: 100% 0 0 0;