影子

CSS 播客 - 017：阴影

假设您已经收到了一个设计图，该设计中有一张剪出的 T 恤图并带有阴影。设计人员会告诉您，产品图片是动态的，并且可通过内容管理系统进行更新，因此阴影也需要是动态的。图片可以是遮阳帽、短裤或任何其他商品，而不是 T 恤。如何使用 CSS 来达到此目的？

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

幸运的是，还有另一个选项：drop-shadow() 过滤器。这样，您就可以完全按照设计人员的要求操作。CSS 中有多种阴影的选项，每种选项都针对不同的使用场景而设计。

方框阴影

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;
}

文字阴影

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%);
}

多个阴影

您可以根据需要使用 text-shadow 添加任意数量的阴影，就像使用 box-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 值实例来添加任意数量的阴影。每个阴影都将使用最后一个阴影作为定位参考点。

检查您的掌握程度

考考你对阴影的了解