css制作投影

使用 box-shadow 属性

box-shadow 是 CSS 中实现投影效果的核心属性，支持设置阴影的偏移、模糊半径、扩散范围和颜色。
基本语法：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散范围] [颜色];

示例：

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

• 水平偏移（5px）：阴影向右移动 5px（负值向左）。
• 垂直偏移（5px）：阴影向下移动 5px（负值向上）。
• 模糊半径（10px）：阴影边缘模糊程度，值越大越模糊。
• 扩散范围（0）：阴影扩大或缩小（正值扩大，负值缩小）。
• 颜色（rgba）：支持透明度（如 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);
}

• 第一层阴影：轻微下移，模拟柔和光源。
• 第二层阴影：加强底部深度，增强立体感。

内阴影（inset）

添加 inset 关键字可实现元素内部的投影效果。
示例：

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

适用于按钮按下状态或凹陷式UI元素。

阴影性能优化

• 避免过度模糊：模糊半径（如 20px 以上）可能引发性能问题。
• 减少阴影数量：多重阴影会增加渲染负担。
• 使用 will-change: transform 提升动画元素的阴影渲染性能。

浏览器兼容性

• 现代浏览器均支持 box-shadow（包括 IE9+）。
• 如需兼容旧版浏览器，可使用 filter: drop-shadow()，但功能较局限。
  示例：

  div {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  }

  注意：drop-shadow 会作用于元素整体（包括透明部分），而 box-shadow 仅作用于元素边框。