html中图片阴影怎么写,css怎么在图片上加阴影？

css怎么在图片上加阴影？下面本篇文章给大家介绍一下使用CSS在图片上加阴影的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

方法1：设置box-shadow属性

box-shadow属性可以设置一个或多个下拉阴影的框。

通过一个简单的代码示例来看看box-shadow属性的实现方法。

css 图片阴影--box-shadow属性

img{

width: 400px;

height: 300px;

}

img{

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

/*考虑浏览器兼容性*/

-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);

}

效果图：

方法2：使用css3的滤镜属性-----filter 属性

可以设置filter:drop-shadow();来给图片添加阴影，我们来通过一个简单的代码示例看看实现方法。

css 图片阴影--filter:drop-shadow()

img{

width: 400px;

height: 300px;

}

img{

-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */

filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));

}

效果图：

更多web前端相关知识，请查阅 HTML中文网 ！！