css中怎么做投影

CSS的投影效果可以为网页增添更加立体化的感觉。实现投影效果的方法是通过CSS中的box-shadow属性来实现。box-shadow属性可以为一个元素增加一个或多个投影效果。

.box {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
} 

box-shadow属性需要设置四个值，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。水平偏移量指的是阴影向右方向的偏移值，垂直偏移量指的是阴影向下方向的偏移值，模糊半径指的是阴影模糊的程度，阴影颜色则可以使用十六进制颜色值或者rgba颜色值设置。

box-shadow属性也可以设置多个阴影效果。多个阴影效果之间使用逗号分隔。靠近元素的阴影效果排在前面。

.box {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5),
              -2px -2px 8px rgba(255, 255, 255, 0.5);
} 

除了box-shadow属性，CSS中还有text-shadow属性可以为文字添加阴影效果。text-shadow属性的用法与box-shadow属性类似，只是不需要设置偏移值。

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

投影效果的不同设置会导致网页视觉效果的不同，需要根据实际的需求进行灵活的运用。