阴影

CSS 播客 - 017：阴影

假设您收到一个设计稿，需要构建一个设计，该设计中有一张 T 恤的图片，已裁剪出来，带有阴影。设计师告诉您，产品图片是动态的，可以通过内容管理系统进行更新，因此阴影也需要是动态的。图片可能不是 T 恤，而是遮阳帽或短裤，或任何其他物品。您如何使用 CSS 实现这一点？

CSS 具有 box-shadow 和 text-shadow 属性，但图片不是文本，因此您无法使用 text-shadow。如果您使用 box-shadow，阴影会出现在周围的框上，而不是 T 恤周围。

幸运的是，还有另一种选择：drop-shadow() 滤镜。这使您能够完全按照设计师的要求进行操作。CSS 中有很多阴影选项，每种选项都专为不同的用例而设计。

盒阴影

浏览器支持

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

来源

box-shadow 属性用于向 HTML 元素的框添加阴影。它适用于块元素和内联元素。

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow 的值顺序如下

  1. 水平偏移量：正数将其从左侧推出，负数将其从右侧推出。
  2. 垂直偏移量：正数将其从顶部向下推，负数将其从底部向上推。
  3. 模糊半径：数值越大，阴影越模糊，而数值越小，阴影越清晰。
  4. 扩展半径（可选）：数值越大，阴影尺寸越大，数值越小，尺寸越小，如果设置为 0，则与模糊半径尺寸相同。
  5. 颜色：任何有效的颜色值。如果未定义，则将使用计算出的文本颜色。

要使盒阴影成为内阴影而不是默认的外阴影，请在其他属性之前添加 inset 关键字。

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

多个阴影

您可以使用 box-shadow 添加任意数量的阴影。添加逗号分隔的值集集合即可实现此目的

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

影响盒阴影的属性

向框添加 border-radius 也会影响盒阴影的形状。这是因为 CSS 正在基于框的形状创建阴影，就好像光线照射到它一样。

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

如果带有 box-shadow 的框位于具有 overflow: hidden 的容器中，则阴影也不会突破该溢出。

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

文本阴影

浏览器支持

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

来源

text-shadow 属性与 box-shadow 属性非常相似。它仅适用于文本节点。

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow 的值与 box-shadow 相同，并且顺序也相同。唯一的区别是 text-shadow 没有 spread 值，也没有 inset 关键字。

当您添加 box-shadow 时，它会被裁剪为框的形状，但 text-shadow 没有裁剪。这意味着如果您的文本是完全或半透明的，则阴影会透过它可见。

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

多个阴影

您可以像 box-shadow 一样，使用 text-shadow 添加任意数量的阴影。添加逗号分隔的值集集合，您可以创建一些非常酷的文本效果，例如 3D 文本。

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

投影

要实现跟随图像任何潜在曲线的投影，请使用 CSS drop-shadow 滤镜。此阴影应用于 alpha 蒙版，这使其非常适合向裁剪图像添加阴影，如本模块简介中的示例。

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow 滤镜具有与 box-shadow 相同的值，但不允许使用 inset 关键字和 spread 值。您可以通过向 filter 属性添加 drop-shadow 值的多个实例来添加任意数量的阴影。每个阴影都将使用上一个阴影作为定位参考点。

检查您的理解情况

测试您对阴影的知识

以下哪个阴影值是 box-shadow 独有的？

水平偏移量
再试一次！
垂直偏移量
再试一次！
模糊半径
再试一次！
扩展半径
🎉
颜色
再试一次！
inset
再试一次！inset 是一个关键字，它也是 box-shadow 独有的。

一个元素上一次最多允许 13 个盒阴影。

正确
没有官方限制。
错误
根据需要添加任意数量的多个盒阴影。