它的值包括 6 个参数：阴影类型，X轴位移，Y轴位移，阴影大小，阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。
浏览器兼容性
Webkit支持：-webkit-box-shadow
Mozilla支持：-moz-box-shadow
IE9支持：box-shadow
IE8及以前：不支持
实用实例
简单效果:
img{
height:300px
-moz-box-shadow:5px 5px
-webkit-box-shadow:5px 5px
box-shadow:5px 5px
}
虚阴影效果:
img{
height:300px
-moz-box-shadow:2px 2px 10px #06c
-webkit-box-shadow:2px 2px 10px #06c
box-shadow:2px 2px 10px #06c
}
渐变阴影效果:
img{
height:300px
-moz-box-shadow:0 0 10px #06c
-webkit-box-shadow:0 0 10px #06c
box-shadow:0 0 10px #06c
}
带光晕效果
img{
height:300px
-moz-box-shadow:0 0 10px 10px #06c
-webkit-box-shadow:0 0 10px 10px #06c
box-shadow:0 0 10px 10px #06c
}
内阴影效果
img{
height:300px
-moz-box-shadow:inset 5px 5px 10px #06c
-webkit-box-shadow: inset 5px 5px 10px #06c
box-shadow: inset 5px 5px 10px #06c
}
彩色阴影
img{
height:300px
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green
}
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>
