只用一个 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 轴半径 的确定 椭圆 为交集 构建 椭圆角边框。

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

↓

↓

↓

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

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

 

 

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