css制作投影

CSS 投影效果实现方法

box-shadow 属性 使用 box-shadow 属性可以快速为元素添加投影效果。该属性接受多个参数：

• 水平偏移量（必需）
• 垂直偏移量（必需）
• 模糊半径（可选）
• 扩散距离（可选）
• 颜色（可选）

示例代码：

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

多层投影效果 通过逗号分隔多个 box-shadow 值可以创建多层投影：

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

内阴影效果 使用 inset 关键字可以创建元素内部阴影：

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

模糊滤镜投影 对于不规则形状元素，可以使用 filter: drop-shadow()：

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

高级投影技巧

• 使用 CSS 变量动态控制投影：

  
  :root {
  --shadow-color: 0,0,0;
  --shadow-opacity: 0.3;
  }

.dynamic-shadow { box-shadow: 2px 2px 10px 0 rgba(var(--shadow-color), var(--shadow-opacity)); }

- 创建长阴影效果：
```css
.long-shadow {
  text-shadow: 
    1px 1px #ccc,
    2px 2px #ccc,
    3px 3px #ccc;
}

性能优化建议

• 避免过度使用大范围模糊的投影
• 对动画元素谨慎使用投影效果
• 考虑使用 will-change: box-shadow 优化性能