方法1：设置box-shadow属性
box-shadow属性可以设置一个或多个下拉阴影的框。
通过一个简单的代码示例来看看box-shadow属性的实现方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--box-shadow属性</title>
<style>
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);
}
</style>
</head>
<body>
<img src="1.jpg" width="400"/>
</body>
</html效果图：
方法2：使用css3的滤镜属性-----filter 属性
可以设置filter:drop-shadow(）;来给图片添加阴影，我们来通过一个简单的代码示例看看实现方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 图片阴影--filter:drop-shadow(）</title>
<style>
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));
}
</style>
</head>
<body>
<img src="1.jpg" width="400"/>
</body>
</html效果图：
更多web前端相关知识，请查阅 HTML中文网 ！！
