CSS3绘制椭圆、半椭圆原理详解

使用场景介绍

椭圆或弧形的使用场景通常较多，这里简单截取一些图：

如上图中的头部背景就是一个典型的弧形应用场景，很多APP都会使用该种样式。

原理介绍

想要绘制椭圆我们用到了一个非常常用的CSS属性：border-radius。

官网的解释：

官方已经很明显的指出使用border-radius可以绘制圆形或椭圆，区别在于使用一个半径还是两个半径，而border-radius就是规定图形四个角的半径大小。

通常一个圆形只有一个半径，因为每一个半径都是相同的，如下图：

而椭圆通常会有两个半径，一个水平半径，一个垂直半径，如下图：

绘制圆形

绘制原型非常简单，也是开发场景中很常见的一种，具体实现方式如下：

.box {
    width: 300px;
    height: 300px;
    background: #FFD900;
    border-radius: 150px;
}

想要绘制圆形，首要条件保证宽高一样，border-radius如果只设置一个属性，那么则代表四个角的半径一样，且半径设置成元素宽高的一半，则相当于四个半圆合成了一个圆。

绘制椭圆

border-radius可以分别设置每个圆角的水平半径和垂直半径，通过这个属性，我们便可以绘制出椭圆。

属性介绍：

分别设置border-radius圆角半径的规则和设置内外边距原理类似，都是上右下左的顺序，具体代码如下：

.box {
    width: 200px;
    height: 100px;
    background: #FFD900;
    border-radius: 100px / 50px;
}

这里我们设置了一个宽高比为2：1的长方形，然后水平半径都设置宽度的一半，垂直半径设置为高度的一半，这样一个水平半径200px、垂直半径100px的椭圆就绘制出来了。

绘制半椭圆

同样借助border-radius可以分别设置垂直半径和水平半径的属性，绘制出一个半椭圆，代码如下：

.box {
    width: 500px;
    height: 100px;
    background: #FFD900;
    border-radius: 50% / 100% 100% 0 0;
}

这里我们设置四个角的水平半径等于盒子宽度，设置左上角和右上角的垂直半径等于高度，但是右下角和左下角的垂直半径为0，这样下半部分就相当于被剪切掉了，一个半椭圆就被绘制出来了。

总结

其实绘制椭圆或者半椭圆非常简单，重点是我们要能够熟练运用border-radius，而且能够准确的计算出各个圆角的半径，除了绘制椭圆和半椭圆外，border-radiu还可以绘制出各种各样的形状，都需要我们灵活运用。