CSS 盒影

用于在块级元素（如 div）上投射阴影。

.shadow {
  box-shadow: 3px 3px 5px 6px #ccc;
}

1. 阴影的水平偏移量，正值表示阴影将在框的右侧，负偏移量将使阴影在框的左侧。
2. 阴影的垂直偏移量，负值表示盒影将在框上方，正值表示阴影将在框下方。
3. 模糊半径（可选），如果设置为 0，则阴影将很锐利，数字越大，模糊程度越大。
4. 扩展半径（可选），正值会增加阴影的大小，负值会减小阴影的大小。默认值为 0（阴影与模糊相同大小）。
5. 颜色

示例

内阴影

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

示例

只在一侧

使用负扩展半径，您可以使盒影挤压并只将其推离框的一侧。

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

浏览器支持

Internet Explorer 盒影

您需要额外的元素……

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

.shadow1 {
  margin: 40px;
  background-color: rgb(68,68,68); /* Needed for IE */
  box-shadow: 5px 5px 5px rgb(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;
}

更多信息

• CSS 背景和边框模块级别 3 规范 (W3C)
• CSS 技巧：多色和镂空阴影 (DigitalOcean)

相关技巧！