box-shadow

CSS 中的 box-shadow 属性用于在元素上添加阴影（有时被称为“投影”，类似于 Photoshop/Figma）。

.card {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

该语法是

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. 水平偏移量（必需）阴影，正值表示阴影将在盒子的右侧，负偏移量将使阴影在盒子的左侧。
2. 垂直偏移量（必需）阴影，负值表示盒子阴影将在盒子上方，正值表示阴影将在盒子下方。
3. 模糊半径（必需），如果设置为 0，则阴影将很清晰，数字越大，模糊程度越高，阴影延伸的距离越远。例如，水平偏移量为 5px 的阴影，也具有 5px 的模糊半径，将有 10px 的总阴影。
4. 扩散半径（可选），正值会增加阴影的大小，负值会减小阴影的大小。默认值为 0（阴影与模糊大小相同）。
5. 颜色（必需） - 接受任何颜色值，如十六进制、命名、rgba 或 hsla。如果省略颜色值，则盒子阴影将以前景颜色（文本 color）绘制。但请注意，旧版本的 WebKit 浏览器（Chrome 20 和 Safari 6 之前）在省略颜色时会忽略规则。

使用半透明颜色，例如 rgba(0, 0, 0, 0.4) 最常见，也是一种不错的效果，因为它不会完全/不透明地覆盖它所覆盖的内容，而是允许其下方的内容略微显示，就像真正的阴影一样。

示例

内阴影

您使用 inset 关键字

.shadow {
   box-shadow: inset 0 0 10px #000000;
}

古代历史

以下是一个包含供应商前缀的代码片段，它提供了尽可能广泛的浏览器支持

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

您甚至可以在 IE 8 中使用盒子阴影。您需要一个额外的元素，但可以使用 filter 来实现。

<div class="shadow1">
  <div class="content">Box-shadowed element</div>
</div>

.shadow1 {
  margin: 40px;
  background-color: rgb(68,68,68); /* Needed for IEs */

  -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);

  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
  zoom: 1;
}
.shadow1 .content {
  position: relative; /* This protects the inner element from being blurred */
  padding: 100px;
  background-color: #DDD;
}

仅一侧

使用负扩散半径，您可以压缩盒子阴影，并将其仅推到盒子的一侧。

.one-edge-shadow {
  box-shadow: 0 8px 6px -6px black;
}

多边框和更多内容

您可以根据需要多次使用逗号分隔盒子阴影。例如，这将在同一个元素上显示两个具有不同位置和不同颜色的阴影。

box-shadow: 
  inset 5px 5px 10px #000000, 
  inset -5px -5px 10px blue;

此示例展示了如何使用它来创建多个边框。

通过将阴影应用于伪元素，然后对其进行操作，您可以获得一些非常漂亮的 3D 盒子阴影效果。

超平滑的阴影 通过多个逗号分隔的值

与 filter: drop-shadow() 的比较

它们可以做类似的事情！但是，等等，不同的事情。这是 关于此主题的深入文章。也许最重要的是要知道，filter 比矩形 box-shadow 更紧密地贴合元素的边缘（即使盒子阴影确实紧密地贴合圆角）。

浏览器支持

更多信息

• CSS 背景和边框模块级别 3
• Mozilla 文档
• CSS 提示：多色和剪裁投影 (DigitalOcean)