css制作阴影效果

CSS 阴影效果实现方法

box-shadow 基础用法
box-shadow 是 CSS 中最常用的阴影属性，支持多个参数：

.box {
  box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 inset;
}

示例：

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

• 正偏移值表示阴影向右/向下，负值向左/向上
• inset 关键字可创建内阴影

多重阴影效果
通过逗号分隔实现叠加阴影：

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

text-shadow 文字阴影
专为文本设计的阴影属性：

.text {
  text-shadow: 2px 2px 4px #000000;
}

参数顺序与 box-shadow 相同，但不支持扩展半径和 inset。

filter: drop-shadow()
适用于不规则形状（如 PNG 图像）：

.img {
  filter: drop-shadow(5px 5px 5px #333);
}

• 参数格式与 box-shadow 类似
• 阴影会跟随元素的透明区域轮廓

阴影性能优化

• 避免过度使用大范围模糊半径
• 对动画元素使用 will-change: transform 提升性能
• 考虑使用 ::after 伪元素单独渲染阴影

浏览器兼容性
所有现代浏览器均支持上述属性，如需兼容 IE9 需使用 -ms-filter 前缀。