css如何给图片添加投影效果

前言： 在网页设计中，添加投影效果可以使图片更加生动和立体，增加页面的美观度和吸引力。通过使用CSS的阴影属性，我们可以很容易地实现这个效果。接下来，我将介绍两种方法来给图片添加投影效果。 一、使用box-shadow属性 box-shadow是CSS3中的一个属性，可以给元素添加一个或多个阴影效果。通过设置box-shadow属性的属性值，我们可以调整投影效果的颜色、位置、模糊度等。 ```html

方法一：使用box-shadow属性

给图片添加黑色投影效果：

<style>
.img-shadow {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

<img src="image.jpg" class="img-shadow" alt="图片" />

上述代码中，我们通过设置box-shadow属性的属性值，即可给图片添加黑色的投影效果。其中box-shadow属性的属性值由四个参数组成，分别是水平偏移量、垂直偏移量、模糊半径和颜色。通过调整这些参数，我们可以实现不同的投影效果。 二、使用投影滤镜 除了使用box-shadow属性，我们还可以使用CSS的filter属性的blur函数来实现图片的投影效果。设置blur函数的参数值可以调整投影的模糊程度。 ```html

方法二：使用投影滤镜

给图片添加模糊投影效果：

<style>
.img-filter {
  filter: blur(5px);
}
</style>

<img src="image.jpg" class="img-filter" alt="图片" />

上述代码中，我们通过设置filter属性的blur函数，并设置参数值5px，即可给图片添加模糊的投影效果。我们还可以调整参数值，实现不同程度的模糊效果。 总结： 通过使用CSS的box-shadow属性和filter属性的blur函数，我们可以很方便地给图片添加投影效果。可以根据具体的需求调整属性的参数值，实现不同的投影效果。在设计网页时，合理运用投影效果能够提升页面的美观度和吸引力，给用户带来更好的视觉体验。