box-shadow 属性--设置元素阴影
实例： 向 div 元素添加 box-shadow
<!DOCTYPE html><html>
<head>
<style>
div{
width:300px
height:100px
background-color:#ff9900
-moz-box-shadow: 10px 10px 5px #888888 /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888
}
</style>
</head>
<body>
<div></div>
</body>
</html>
text-shadow 属性 ---设置文字阴影 <!DOCTYPE html>
<html>
<head>
<style>
h1{
text-shadow: 5px 5px 5px #FF0000
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
div{
background-color:#EBEBEB
width:500px
height:100px
line-height:100px
color:#E3E1E2
font-size:40px
font-weight:bold
font-family:"Arial Black", Gadget, sans-serif
text-shadow:0 1px 1px rgba(255,255,255,1),
0 -1px 1px rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div>This is heading</div>
</body>
</html>
效果图：
大概就是这样子的，你再调一调就能和你的图片一样了，css3文字阴影效果只有支持css3的浏览器才能显示，比如chrome、Firefox等，IE9以下不支持。
