Box Shadow

CSS 中的 `box-shadow` 属性主要用于在元素的边框周围添加阴影效果。该属性因能够实现网页元素的三维效果而广受欢迎。我们可以通过逗号分隔设置多个效果，并遵循接近度的要求。它通常描述了相对于**元素、颜色、半径**和**模糊**的 X 和 Y 偏移量。

`box-shadow` 属性允许您用**阴影效果**覆盖一个元素。如果为 `box-shadow` 指定了 `border-radius`，则 `box-shadow` 将具有相同的圆角。其顺序与 z 轴顺序中的多个文本阴影相同。首先指定的阴影始终显示在最上面。

边框阴影有多种形式。下面展示了一些示例。

语法

CSS 的 `box-shadow` 属性遵循不同类型的语法。上面示例使用的语法如下所示。

上述语法可以通过指定单个边框阴影来解释，使用的值为：

1. 用于两个、三个和四个的**<length>**值。
2. 如果只给出两个值，则将其解释为**<offset-x>**和 **<offset-y>**。
3. 如果给出第三个值，则将其解释为**<blur-radius>**。
4. 如果给出第四个值，则将其解释为**<spread-radius>**。
5. **<color>** 是一个可选值，`inset` 关键字也是可选的。要指定更多，我们需要通过逗号分隔来提供阴影。

指定值

**Inset:** `inset` 关键字用于将单边阴影更改为框架。它绘制在边框内部，即使是透明边框，也显示在背景之上，但内容位于框内，内容被压缩。

**<offset-x> <offset-y>:** 这些是 **<length>** 值，它们在轴方向上设置阴影的偏移。`<offset-x>` 用于指定水平距离，负值会将阴影投射到元素的**左侧**。同样，**<offset-y>** 用于指定垂直距离，负值会将阴影投射到元素的**顶部**。如果同时考虑这两个值为 0，则阴影属性将在元素后面产生模糊效果（前提是已设置 **<blur-radius>** 或 **<spread-radius>**）。

**<blur-radius>:** 第三个 **<length>** 值，高度依赖于模糊。指定的值越大，模糊就越大，因为阴影会变得更亮、更大。不允许使用负值，也没有指定值。0 用于处理清晰的边缘。模糊半径是根据垂直于阴影边缘的模糊距离的颜色过渡计算的。它在内外两个端点之间变化。

**<spread-radius>:** 这是第四个 **<length>** 值。散布半径中的值根据正值和负值进行判断。正值总是会**扩大**并增长，而负值则会使阴影**缩小**。如果没有指定值，则 0 被视为默认值，此时阴影的接近程度与元素的大小相同。

**<color>:** **<color>** 是可以为所有可能符号和关键字指定的值。如果未指定，则默认颜色值自动设置为当前颜色。

示例

示例 1

输出

在此示例中，我们尝试通过包含**三个**阴影来演示 `box-shadow` 属性：**投影阴影**、**内嵌阴影**和带有绝对**2px 边框效果**的**常规阴影**，以便更好地可视化。当 x 偏移量、y 偏移量和模糊效果设置为零时，形成的阴影将在所有侧面上具有实心彩色轮廓。因此，会为正面和背面绘制阴影。同样，`border-radius` 默认设置为零，因此阴影本身会形成圆角。需要注意的是，`box-shadow` 不会影响元素的尺寸。之后，我们为元素添加了**边距**，以便阴影不会与相邻元素的边框重叠。

示例 2

输出

在此示例中，我们尝试用边框进行覆盖，以明确使用 `box-shadow` 时尺寸不会改变。为此，我们需要使用**内边距**和**外边距**来展示这些不同类型的阴影。在不影响元素尺寸的情况下，可以根据需要进行设置。

总结

在本教程中，我们从零基础到高级水平学习了如何使用 `box-shadow` 来创建元素图表。`box-shadow` 广泛用于创建出色且逼真的用户界面。它能改善 **HTML** 元素的整体外观，并提供自然的外观。

我们还了解了各种 `box-shadow` 技术及其语法知识。`box-shadow` 易于理解和实现，因为它不需要尺寸知识，一旦我们熟悉了它，就可以经常用于我们的 HTML 元素。因此，可以说 `box-shadow` 是一种动态技术，可以为网页或 Web 应用的任何 UI 元素的框架产生视觉影响。