CSS3中box-shadow教程
时间：2011-02-20 来源：www.paranimage.com 作者：帕兰 我要评论
今天我们学习CSS3中box-shadow属性，首先感谢作者帕兰映像的无私奉献精神，box-shadow可以让我们打造阴影效果。
firefox可能过其自身属性-moz-box-shadow、Safari和Chrome通过自身属性-webkit-box-shadow来实现下面的效果
css3中box-shadow属性的语法
box-shadow有六个可设值:box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色，其相关属性：text-shadow，如果不调置阴影类型时，默认为投影效果。设为inset时，为内阴影效果。X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。阴影大小、扩展、颜色和Photoshop里面的都同理。
通过实例分析讲解box-shadow
<html>
<head>
<style type="text/css">CSS部份写在这里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
(1). 投影，没有位移，10px的阴影大小，没有扩展，颜色#06C
img{box-shadow:0 0 10px #06C;-webkit-box-shadow:0 0 10px #06C;-moz-box-shadow:0 0 10px #06C;}
这里的颜色值是十六进制颜色值，我们还可以使用RGBA值，RGBA值的好处是，它多了一个Alpha透明值，你可以控制阴影的透明度。
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5);-moz-box-shadow: 0 0 10px rgba(0, 255, 0, .5);-webkit-box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2). 在上面的基础上加上20px的扩展
img{-moz-box-shadow:0 0 10px 20px #06C-webkit;box-shadow:0 0 10px 20px #06C;box-shadow:0 0 10px 20px #06C;}
(3). 内阴影，无位移，10px大小，没有扩展，颜色#06C
img{-moz-box-shadow:inset 0 0 10px #06C;-webkitbox-shadow:inset 0 0 10px #06C;box-shadow:inset 0 0 10px #06C;}
(4). 多重阴影效果
box-shadow可以同时使用多次，我们来个四色的阴影。
img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
(5). 使用多个阴影属性的顺序问题
当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。比如下面这段代码，我们先写一个10px的绿色阴影，再写一个10px大小但扩展20px的阴影。结果是：绿色阴影层在黄色阴影层之上。
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}
但如果我们把顺序调一下，像这样:
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}
我们将看不到后写的绿色阴影层，因为它先写且半径比较大的黄色层覆盖掉了。
强大的CSS3，强大的box-shadow让我们不得不感到，一场的革命又要开始了，这将推动前端设计与开发更加完快速的发展。