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

Conan9912345

于 2024-08-11 14:11:17 发布

阅读量523

点赞数 16

分类专栏： HTML + CSS 文章标签： html 前端 css css3 html5

本文链接：https://blog.csdn.net/Conan9912345/article/details/141104666

版权

HTML + CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上一篇章的末尾，我们只用一个 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 游戏小蜜蜂中的太空入侵者。