css如何制作投影

使用 box-shadow 属性

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

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

• 第一个值 10px 表示水平偏移（向右为正）。
• 第二个值 10px 表示垂直偏移（向下为正）。
• 第三个值 5px 表示模糊半径（值越大，边缘越模糊）。
• 第四个值 0 表示扩散半径（正值扩大阴影，负值缩小阴影）。
• 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.3);
}

文字投影

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

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

• 第一个值 2px 表示水平偏移。
• 第二个值 2px 表示垂直偏移。
• 第三个值 4px 表示模糊半径。
• rgba(0, 0, 0, 0.5) 是阴影颜色和透明度。

使用滤镜 drop-shadow

CSS 的 filter 属性中的 drop-shadow 可以为元素（包括非矩形元素）添加更自然的投影。

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

drop-shadow 的参数与 box-shadow 类似，但适用于元素的轮廓。