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];
水平偏移量（必需）阴影，正值表示阴影将在盒子的右侧，负偏移量将使阴影在盒子的左侧。垂直偏移量（必需）阴影，负值表示盒子阴影将在盒子上方，正值表示阴影将在盒子下方。模糊半径（必需），如果设置为 0，则阴影将很清晰，数字越大，模糊程度越高，阴影延伸的距离越远。例如，水平偏移量为 5px 的阴影，也具有 5px 的模糊半径，将有 10px 的总阴影。扩散半径（可选），正值会增加阴影的大小，负值会减小阴影的大小。默认值为 0（阴影与模糊大小相同）。颜色（必需） - 接受任何颜色值，如十六进制、命名、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 来实现。
.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 更紧密地贴合元素的边缘（即使盒子阴影确实紧密地贴合圆角）。
浏览器支持
这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面ChromeFirefoxIEEdgeSafari4*3.5*9125*移动/平板电脑Android ChromeAndroid FirefoxAndroidiOS Safari12712744.0-4.1*
更多信息
CSS 背景和边框模块级别 3Mozilla 文档CSS 提示：多色和剪裁投影 (DigitalOcean)