css中怎么设置图片阴影

使用CSS设置图片阴影
在Web设计中，设置图片阴影可以增加图片的层次感和立体感，让页面看起来更加美观。下面介绍一些CSS设置图片阴影的方法。
1. box-shadow属性
box-shadow属性是CSS中设置元素阴影的属性，该属性支持多个参数设置。其中第一个参数表示阴影位置偏移量，第二个参数表示阴影模糊半径，第三个参数表示阴影扩张程度，第四个参数表示阴影颜色。例如，下面是一个设置图片阴影的示例代码：

<style type="text/css">
    .image-shadow {
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    }
</style> 

2. filter属性
filter属性是CSS3中设置元素滤镜效果的属性，其中有一个drop-shadow()函数可以用来设置阴影效果。该函数支持多个参数设置，包括阴影位置偏移量、模糊半径、阴影扩张程度和阴影颜色等。例如，下面是一个设置图片阴影的示例代码：

<style type="text/css">
    .image-shadow {
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
    }
</style> 

需要注意的是，filter属性只有在支持CSS3的现代浏览器中才能生效。
3. text-shadow属性
text-shadow属性是CSS中设置文本阴影的属性，但是它也可以用来设置图片阴影。该属性支持多个参数设置，包括阴影位置偏移量、模糊半径和阴影颜色等。例如，下面是一个设置图片阴影的示例代码：

<style type="text/css">
    .image-shadow {
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
</style> 

但是需要注意的是，由于text-shadow属性是用来设置文本阴影的，所以使用该属性可能会对图片的显示产生一些副作用。
总结
以上介绍了三种设置图片阴影的CSS属性，包括box-shadow、filter和text-shadow。根据具体需求，可以选择使用不同的属性来实现阴影效果。在设置阴影时，考虑阴影的位置、颜色、模糊程度和扩展程度等因素，可以让页面看起来更加美观。