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

上一篇章的末尾，我们只用一个 div 元素写了一个鸡蛋，在欧几里得平面几何中，鸡蛋的形状已经不能算是标准形状了。对于非标准的形状，没有比较直观的几何规律，命名方面也更加困难，俗称不规则图形，在欧几里得平面几何中，将其统称为多边形。

在平行四边形篇中，我们首先使用常规的盒模型写出了矩形与正方形。然后使用 transform 属性中的 skew 方法做斜切，写出了传统平行四边形和菱形。

在三角形与梯形篇中，我们引入 border 属性，通过对边框的巧妙控制，写出了梯形与三角形。

在弧形篇中，我们再次引入 border-radius 属性，通过对圆角边框的灵活运用，写出了圆形、椭圆形、扇形、吃豆人和鸡蛋。

那么今天，我们再次引入一个 box-shadow 属性，通过对阴影效果的灵活使用，写出更多令人不可思议的多边形吧！

---

一、阴影效果

1. 基本用法

在 CSS 中，box-shadow 属性用于在元素的框架上添加阴影效果。

width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px green;

可以看到，box-shadow 属性后面跟了三个值：

box-shadow: <offset-x> <offset-y> <color>;

• offset-x：阴影在水平方向的偏移量，水平向右为正方向；

• offset-x：阴影在竖直方向的偏移量，竖直向下为正方向；

• color：阴影颜色。

2. 模糊半径

接下来，我们添加一个值：

width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px green;

box-shadow: <offset-x> <offset-y> <blur-radius> <color>;

blur-radius：

• 阴影模糊半径；

• 值越大，模糊面积越大，阴影就越大越淡；

• 不能为负值；

• 默认为 0，此时阴影边缘锐利。

对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。

关于数字图像处理的模糊算法，这里就不做展开了。

3. 扩散半径

接下来，我们再添加一个值：

width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px 25px green;

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

spread-radius：

• 阴影扩散半径；

• 取正值时，阴影扩大；

• 取负值时，阴影收缩；

• 默认为 0，此时阴影与元素同样大；

• 需要考虑 inset。

4. 内阴影

此时，咱们又看到了一个关键词 inset，我们来试试看是什么样的。

width: 800px;
height: 400px;
background: red;
box-shadow: inset 50px 25px green;

可以看到，如果没有指定 inset，默认阴影在边框外，即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内（即使是透明边框）、背景之上、内容之下。

具有 inset 关键词的时候，同时添加上模糊半径和扩散半径的情况，这里就留给大家自己去尝试了。

5. 多个阴影

我们可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。

width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px green, 25px 50px blue;

可以看到，每一个阴影效果都是独立的，可以放开随意控制。

width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px 25px green, inset 25px 50px 25px blue;

box-shadow 属性还可以设置 none 关键字，将其元素设置为没有阴影效果。

box-shadow 属性与别的属性相结合，还可以得到很多不可思议的效果，这里就不再展开了。

---

二、月牙

我们设想一个问题，当一个元素同时设置了 border-radius 属性，那么阴影也会有圆角效果吗？

咱们不妨直接在上一篇章弧形篇中的圆形的基础上，添加一个阴影看看效果：

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

我们把圆形设置为黄色，阴影设置成红色，得到如下结果：

 

可以看到，阴影也会有圆角效果。

既然如此，那么我们设置圆的颜色为透明色：

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

就这样，简简单单的，我们就写了一个月牙出来了！

---

三、太空入侵者

咱们来思考一个问题，如果一个元素，阴影的偏移量很大，超过了元素本身的大小，岂不是元素和阴影分离了呢？

width: 200px;
height: 200px;
background: red;
box-shadow: 300px 300px green;

看看结果：

 

可以看到，阴影和元素本身分离了，但是阴影和元素本身是全等（大小和形状都一样）的。

前面说了，我们可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。那么，我们是否可以借助这个特性，写出更加奇特的效果了呢？

width: 50px;
height: 50px;
background: red;
box-shadow: 0 0 0 50px red,0 50px 0 50px red,-125px 75px 0 25px red,125px 75px 0 25px red,-150px -150px 0 0 red,150px -150px 0 0 red,-100px -100px 0 0 red,100px -100px 0 0 red,-150px -50px 0 0 red,-100px -50px 0 0 red,100px -50px 0 0 red,150px -50px 0 0 red,-200px 0 0 0 red,-150px 0 0 0 red,150px 0 0 0 red,200px 0 0 0 red,-250px 50px 0 0 red,-200px 50px 0 0 red,200px 50px 0 0 red,250px 50px 0 0 red,-250px 100px 0 0 red,250px 100px 0 0 red,-250px 150px 0 0 red,-150px 150px 0 0 red,150px 150px 0 0 red,250px 150px 0 0 red,-100px 200px 0 0 red,-50px 200px 0 0 red,50px 200px 0 0 red,100px 200px 0 0 red;

这样，我们写了 30 个阴影，控制了每一个阴影的偏移位置和部分阴影的扩散。于是，我们得到了古老 FC 游戏小蜜蜂中的太空入侵者。

 

是不是很神奇？如此复杂的形状，我们只用了一个 div 元素。

由于我们可以定义任意多个阴影，并且可以控制每一个阴影的偏移量，同时每一个阴影都可以独立控制其模糊半径和扩散半径。因此，理论上，我们可以只用一个 div 元素写出任何我们想要的形状！

由于多边形是没有固定形状的，不同形状的所属规律也是不同的。因此，对于咱们的多边形篇，我们就这样写了一个由弧形组成的月牙形状和由直线组成的太空入侵者形状。聪明的您，我猜一定可以写出更多不可思议的形状吧！

↓

↓

↓

好滴，咱们的多边形篇就先写到这里吧！这里留下一个问题，阴影和元素本身是全等（形状和大小一样）的，加上扩散也最多是相似（形状一样，大小不一样）的。那么我们要写更加不可思议的形状，有没有更好的方法呢？

敬请期待我们的下一个篇章 —— 伪元素篇。

 

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