只用一个 HTML 元素可以写出多少形状？——弧形篇

在前面的篇章中，我们讲解了只用一个 div 元素写出三角形系列和四边形系列中的规则形状。

在欧几里得几何范畴中，三角形系列、平行四边形系列和梯形系列，是属于简单几何形状，因为目前的学术范畴已经掌握了这三个系列形状的较多性质与特点。其主要原因，构成这三个系列形状的边，都是直线。

构成图形的线，除了直线，还有曲线。那么今天我们就来盘点一下使用曲线构成的一些规则形状吧！

---

一、圆角边框属性

上一篇章中，我们重点讲解了边框的三个基本属性，以及配合每一个方向的灵活运用。末尾留了一个悬念 border-radius，那么今天我们就来讲一下这个圆角边框属性。

1. 圆角值

1.1 一个值

border-radius 属性用于设置元素的外边框圆角。

width: 800px;
height: 400px;
background: red;
border-radius: 50px;

我们给之前的矩形添加了一个 50px 的圆角，显示效果如下：

 

其原理是在矩形的每一个角落以设置的值为半径确定一个圆，这个圆与边框的交集形成圆角效果。

1.2 两个值

我们再尝试一下，给 border-radius 属性设置两个值：

width: 800px;
height: 400px;
background: red;
border-radius: 50px 200px;

于是我们得到了如下对角的圆角矩形效果：

 

我们会发现，两个对角是一样大的圆角。

 

从原理图上可以看到，第一个值控制的是左上角和右下角的内切圆半径，第二个值控制的是右上角和左下角的内切圆半径。

1.3 三个值

那么，三个值呢？

width: 800px;
height: 400px;
background: red;
border-radius: 50px 200px 100px;

我们看到了如下结果：

 

可以看到，第三个值仅仅控制了右下角的内切圆半径。

 

1.4 四个值

好吧，我们本着研究到底的精神，加上第四个值试试看。

width: 800px;
height: 400px;
background: red;
border-radius: 50px 200px 100px 25px;

这次是在意料之中了。

 

很明显，第四个值只控制了左下角的内切圆半径。

 

当我们再次尝试设置第五个值的时候，四个角的圆角都消失了。通过验证可得，border-radius 属性只能直接设置四个值。

由此可得，border-radius 属性的四个值将从元素的左上角开始按照顺时针依次对每一个角进行控制。

2. 椭圆角值

接下来，我们换一种写法，用一种新的语法结构。

width: 800px;
height: 400px;
background: red;
border-radius: 200px / 50px;

我们在 border-radius 属性的两个值中间添加一个斜杠（/），会得到另外一种效果。

 

哇，这有点标新立异了，但是为什么会这样显示呢？

 

可以看到，当我们在 border-radius 属性的两个值中间添加一个斜杠（/），那么斜杠（/）前后的两个值将会成为 x 轴方向的半径和 y 轴方向的半径，以此确定一个椭圆，让其边框与椭圆之间取交集形成椭圆角边框。

那么，椭圆角边框能否设置多个值呢？当然可以。

width: 800px;
height: 400px;
background: red;
border-radius: 200px 100px 50px 25px / 100px 50px 25px 10px;

这样写，我们相当于在四个角都确定了一个椭圆。

 

其中每一个值对应的位置如下：

 

可以看到，我们在斜杠（/）的前面写的四个值分别是从左上角开始顺时针的四个椭圆的 x 轴半径，在斜杠（/）的后面写的四个值分别是从左上角开始顺时针的四个椭圆的 y 轴半径。

其中，无论是斜杠（/）前面还是斜杠（/）后面，四个值都可以简写，互不干扰。

width: 800px;
height: 400px;
background: red;
border-radius: 200px 100px 50px 25px / 50px;

比如这样写的，那么确定的四个椭圆，y 轴半径都是 50px，于是便得到如下效果：

3. 单独一个角的圆角属性

有时候我们想要对每一个角进行单独控制，同时需要代码更加有可读性，该怎么办呢？没错，回想一下上一篇章中的边框属性，我们可以猜到，border-radius 属性其实也是一个缩写属性。这里，我们可以把 border-radius 属性拆分成针对每一个角落的四个属性：

• border-top-left-radius：设置左上角的圆角；

• border-top-right-radius：设置右上角的圆角；

• border-bottom-right-radius：设置右下角的圆角；

• border-bottom-left-radius：设置左下角的圆角。

比如纯圆角边框：

// 缩写属性
border-radius: 50px 200px 100px 25px;

// 等价于
border-top-left-radius: 50px;
border-top-right-radius: 200px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 25px;

再比如椭圆角边框：

// 缩写属性
border-radius: 200px 100px 50px 25px / 100px 50px 25px 10px;

// 等价于
border-top-left-radius: 200px / 100px;
border-top-right-radius: 100px / 50px;
border-bottom-right-radius: 50px / 25px;
border-bottom-left-radius: 25px / 10px;

最后说明两点：

1. 即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响；

2. 当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

实际开发中，圆角边框属性，更多采用的是缩写属性，大家可以灵活运用，会有各种意想不到的效果噢！

---

二、椭圆与圆

通过对 border-radius 属性的学习，相信大家已经想到了。如果我对一个矩形设置圆角边框属性，其半径设置为 50%，岂不是就成了一个椭圆了？

width: 800px;
height: 400px;
background: red;
border-radius: 50%;

结果没有让我们失望。

 

同样的道理，我们对一个正方形设置圆角边框属性，其半径设置为 50%，就可以得到一个圆。 

width: 800px;
height: 800px;
background: red;
border-radius: 50%;

没错，只要掌握了 border-radius 属性，画椭圆和圆形就是这么的简单！

---

三、扇形系列

既然圆形都写出来了，我们再来回忆一下上一篇章的三角形。设想一下，如果把圆形和三角形相结合，是不是可以写出扇形呢？

1. 简单扇形

width: 0;
height: 0;
border-top: 400px solid red;
border-right: 400px solid transparent;
border-left: 400px solid transparent;
border-radius: 50%;

我们直接在写三角形的代码上添加了一个 border-radius 属性，设置其值为 50%，就可以得到一个扇形。

 

其它方向上的扇形就不一一举例了，一定难不倒聪明的您的！

2. 吃豆人

现在，我们需要把一个弧形在右边的扇形先写出来：

width: 0;
height: 0;
border-top: 400px solid transparent;
border-right: 400px solid red;
border-bottom: 400px solid transparent;
border-left: 400px solid transparent;
border-radius: 50%;

仔细看代码，聪明的您一定也发现异常了。确实，这个图形中，左边框明明没有用途，为什么我要写出来呢？

我们尝试一下，把其它三个边框的颜色都设置为红色，只有右边框设置成透明。

width: 0;
height: 0;
border-top: 400px solid red;
border-right: 400px solid transparent;
border-bottom: 400px solid red;
border-left: 400px solid red;
border-radius: 50%;

然后我们惊讶地看到了一个童年回忆 —— 吃豆人！

 

哈哈，是不是很神奇，其原理还是如此的简单！

3. 半圆

那么，如果我们用上一篇章中的等腰直角三角形添加圆角边框属性呢？

width: 0;
height: 0;
border-top: 400px solid red;
border-right: 400px solid red;
border-bottom: 400px solid transparent;
border-left: 400px solid transparent;
border-radius: 50%;

我们试了一下，得到一个半圆。

 

扇形系列表明，代码的灵活性可以让我们得到更多惊喜的图形。那么，如果我们使用三角形与椭圆相结合，又会得到哪些形状呢？留给大家自己尝试吧！

---

四、画个蛋

扇形系列中，我们用到的都是使用 border-radius 属性确定圆形，那如果我们使用 border-radius 属性确定椭圆，又可以得到更多意想不到的形状。

width: 400px;
height: 600px;
background: red;

我们先构建这样一个矩形：

 

然后我们先给这个矩形一个 border-radius 属性，设置值为 50%：

width: 400px;
height: 600px;
background: red;
border-radius: 50%;

得到一个垂直的椭圆：

 

现在，我们把 border-radius 属性的值修改一下：

width: 400px;
height: 600px;
background: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

然后，我们惊讶的发现，我们竟然写了一个蛋！

 

我们简单分析一下其原理：

 

可以看到，上面两个角都是以 50% 为 x 轴半径，以 60% 为 y 轴半径的确定椭圆为交集构建椭圆角边框。下面两个角是以 50% 为 x 轴半径，以 40% 为 y 轴半径的确定椭圆为交集构建椭圆角边框。

由此可见，没有做不到，只有想不到，只要思想足够天马行空，就可以得到意想不到的美丽画卷！

↓

↓

↓

好嘞，弧形篇我们就先讲到这里。可以看出来，其实还可以画出很多很多很多的形状，就不再这里罗列了，一切交给聪明的您进行发散思维吧！

敬请期待下一篇章 —— 多边形篇！

 

 

关注“临界程序员”微信公众号，为您带来更多精彩内容！