css制作投影

使用 box-shadow 属性

CSS 的 box-shadow 属性是创建投影最直接的方式。该属性支持多个参数，包括水平偏移、垂直偏移、模糊半径、扩散半径和颜色。

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

• 第一个值 10px 表示水平偏移（向右为正）。
• 第二个值 10px 表示垂直偏移（向下为正）。
• 第三个值 5px 表示模糊半径（值越大越模糊）。
• 第四个值（可选）表示扩散半径（控制阴影大小）。
• 最后一个值 rgba(0, 0, 0, 0.5) 是阴影颜色和透明度。

内阴影效果

通过 inset 关键字可以实现内阴影效果，常用于按钮或凹陷式设计。

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

多重阴影

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

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

使用 filter: drop-shadow()

drop-shadow() 滤镜适用于不规则形状（如透明 PNG 图像或 SVG），会跟随元素的轮廓生成阴影。

.image {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

• 参数与 box-shadow 类似，但不支持扩散半径和 inset。

文字投影

通过 text-shadow 属性可以为文字添加投影效果。

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

• 参数结构与 box-shadow 相同，但不支持扩散半径。

性能优化建议

• 避免过度使用模糊半径（如超过 20px），可能影响渲染性能。
• 对于动画元素，优先使用 transform 而非 box-shadow，因阴影计算较耗资源。