css制作阴影效果

使用 box-shadow 属性

box-shadow 是 CSS 中最常用的阴影效果属性，支持内阴影和外阴影。基本语法如下：

box-shadow: h-offset v-offset blur spread color inset;

• h-offset：水平偏移量（正值向右，负值向左）。
• v-offset：垂直偏移量（正值向下，负值向上）。
• blur：模糊半径（值越大边缘越模糊，0 表示无模糊）。
• spread：阴影扩展（正值扩大，负值缩小）。
• color：阴影颜色（支持 HEX、RGB、RGBA 等格式）。
• inset：可选关键字，表示内阴影（默认外阴影）。

示例代码：

div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}

多阴影叠加

通过逗号分隔多个 box-shadow 值，实现复杂阴影效果。

div {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

文字阴影 text-shadow

为文字添加阴影效果，语法与 box-shadow 类似，但不支持 spread 和 inset。

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

使用 filter: drop-shadow()

适用于不规则形状（如 SVG 或透明 PNG），阴影会贴合内容轮廓。

img {
  filter: drop-shadow(5px 5px 10px #000);
}

内阴影效果

通过 inset 关键字实现元素内部阴影。

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

注意事项

• 性能优化：过度使用模糊阴影（blur 值过大）可能影响页面渲染性能。
• 浏览器兼容性：box-shadow 和 text-shadow 主流浏览器均支持，drop-shadow 需注意旧版本兼容性。