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仅作用于元素边框。
