css可以实现很多图像效果。 图像的摄影效果是其中之一。 那么，css如何在图像中添加拍摄效果？ 本文介绍如何使用css给图像添加阴影。 希望能帮上忙。
方法1 :设置框-关机属性
让我们用一个简单的代码示例来看看如何实现box-shadow属性。
css图像阴影--box-shadow属性. demo{
width: 400px；
高： 300 px；
margin : 50px自动；
}
. demo img{
box-shadow :10 px 10 px 10 px rgba (0，0，0，5)；
/*考虑浏览器兼容性*
- moz-box-shadow :10 px 10 px 10 px rgba (0，0，5)；
- WebKit-box-shadow :10 px 10 px 10 px rgba (0，0，5)；
}
效果图表：
要向框中添加一个或多个阴影，请使用框-shadow属性。
用box-shadow属性设置图像的阴影是否很容易呢？ 让我们看看如何设置box-shadow属性。 box-shadow : h-shadowv-shadowblurspreadcolorinset；
属性值： h-shadow :为定义水平阴影位置而必须设置的值。 允许负值。
v-shadow :定义垂直阴影位置所需设置的值。 允许负值。
bur :定义模糊距离的可选值。
spread :使用可选设置的值定义阴影的大小。
color :使用可选设置的值定义阴影的颜色。 如果未设置值，建议设置颜色值，因为颜色值基于浏览器的显示。
inset:(可选)设定值，允许在设定后将“外部阴影”(outset )更改为内部阴影。
方法2 )使用css3的过滤属性-----filter属性
filter属性定义元素的视觉效果，如模糊和饱和度。
可以设置过滤器： drop-shadow (； 要给图像添加阴影，请使用简单的代码示例来查看如何实现。
css图像阴影--box-shadow属性. demo{
width: 400px；
高： 300 px；
margin : 50px自动；
}
. demo img{
/*考虑浏览器兼容性： Chrome、Safari、Opera */
- WebKit-filter 3360 drop-shadow (10px 10 px rgba ) 0，0，0，5)；
过滤器： drop-shadow (10px 10px 10px rgba ) 0，0，5)；
}
效果图表：
说明：过滤器： drop-shadow (h-shadowv-shadowblurspreadcolor )；
属性值： h-shadow :设置阴影的水平偏移； 允许负值。 负值会在元素的左侧显示阴影。
v-shadow :设置阴影的垂直偏移； 允许负值。 负值会在元素上显示阴影。
bur )设置阴影模糊。 值越大，模糊越强，阴影越淡。 不允许负值。 如果未设置，则默认值为0。 阴影的边界很锐利。
spread :设置阴影的大小。 正值会放大阴影，负值会缩小阴影。 如果未设置，则默认值为0。 阴影的大小与元素的大小相同。
注： Webkit和其他一些浏览器不支持spread，添加后不会渲染它。
颜色：设置阴影颜色； 如果未设置，建议设置颜色，因为颜色值基于浏览器