css制作投影

CSS 投影制作方法

box-shadow 属性 使用 box-shadow 属性可以轻松为元素添加投影效果。该属性接受多个参数：水平偏移、垂直偏移、模糊半径、扩散半径和颜色。

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

多层投影效果 通过逗号分隔多个 box-shadow 值，可以创建多层投影效果，增加深度感。

.box {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

内阴影效果 使用 inset 关键字可以创建内阴影效果，适合制作凹陷或压按效果。

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

模糊与扩散控制 调整模糊半径和扩散半径可以改变投影的柔和程度和大小。较大的模糊值会产生更柔和的边缘。

.box {
  box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
}

颜色与透明度 使用 RGBA 颜色值可以控制投影的透明度，创建更自然的阴影效果。

.box {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

文字投影效果 text-shadow 属性专门用于为文本添加投影，参数与 box-shadow 类似但不支持扩散半径。

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

滤镜投影效果 CSS 滤镜的 drop-shadow 函数可以创建更复杂的投影效果，特别是对不规则形状元素。

.icon {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.7));
}

性能优化建议 避免过度使用大面积投影效果，特别是在动画元素上，这可能导致性能问题。对于需要高性能的场景，考虑使用 PNG 阴影图像替代。