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

2,487 阅读3分钟

前言

作为前端开发人员,利用CSS绘制各种图形在所难免。比如说常见的弧形、椭圆、三角形等等,有的开发人员为了开发简便,则直接使用图片来替代各种图形,但是这样做有一个弊端:页面性能会受到一定得影响,会降低用户体验。本篇文章则教大家如何绘制一个椭圆,这也是经常遇到的形状。

使用场景介绍

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

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

原理介绍

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

官网的解释:

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

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

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

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

绘制圆形

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

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

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

绘制椭圆

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还可以绘制出各种各样的形状,都需要我们灵活运用。