影子

CSS 播客 - 017：阴影

假设你收到了一份设计作品，设计中有一张 T 恤的图片， 并带有阴影 设计师可以告诉您，产品图片是动态的 并且可通过内容管理系统 因此阴影也需要是动态的他们不再是 T 恤 图片可以是遮蔽物、短裤或任何其他物品。 如何使用 CSS 实现这一目的？

CSS 具有 box-shadow和 text-shadow 个媒体资源， 但图片不是文字，因此您无法使用 text-shadow。 如果您使用 box-shadow，则阴影位于周围的方框上。 而不是在 T 恤周围。

幸运的是，还有一种选择： drop-shadow() 过滤条件。 这样，您就可以完全按照设计人员的要求完成工作。 CSS 中关于阴影的选择有很多 分别针对不同应用场景而设计

方框阴影

浏览器支持

  • Chrome：10. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：4. <ph type="x-smartling-placeholder">
  • Safari：5.1. <ph type="x-smartling-placeholder">

来源

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

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

box-shadow 的值顺序如下：

  1. 水平偏移： 正数将它从左侧推出，而负数会将它从右侧推出。
  2. 垂直偏移： 正数将它从顶部向下推， 负数则从底部向上推。
  3. 模糊半径： 数值越大，阴影越模糊， 而较小的数字会产生更清晰的阴影。
  4. 展开半径（可选）： 阴影越大，阴影越大；阴影越小； 如果设为 0，则与 blur radius 大小相同。
  5. Color： 任何有效的颜色值。 如未定义，系统将使用计算出的文本颜色。

要将方框阴影设为内部阴影，请执行以下操作： 而不是默认的外部阴影， 在其他属性之前添加 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. <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：3.5。 <ph type="x-smartling-placeholder">
  • Safari：1.1. <ph type="x-smartling-placeholder">

来源

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 值实例。 每个阴影都将使用最后一个阴影作为定位参考点。

检查您的理解情况

测试您对阴影的掌握情况

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

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

一个元素一次只能有 13 个方框阴影。

正确
无官方限制。
错误
根据需要添加任意数量的框阴影。