CSS3阴影效果box-shadow实例讲解-10-16 22:38
使用阴影效果，小编用得最多的地方就是产品展示页面，将包含产品的div边框给其加上阴影。
css3的box-shadow和text-shadow有点类似，不过前者是对象实现图层的阴影效果，而后者是对对象的文本设置阴影。
那么CSS3阴影效果究竟是怎么实现的呢？
其实最主要的就是box-shadow。
我们先来看看语法规则：
div{box-shadow: ??||}
也就是：
div{box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句话讲：
对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
这样讲起来就浅显易懂了。
我们来看看一个简单的实例。
div.box1{
width:300px;
height:100px;
background-color:#1abc9c;
-moz-box-shadow: 10px 10px 5px #333333; /* 老的 Firefox */
box-shadow: 10px 10px 5px #333333;
}
div的右方和下方将会产生阴影效果。
再来看一个实例
div.box2{width:300px;height:100px;-moz-box-shadow:2px 10px 11px #1abc9c; -webkit-box-shadow:2px 10px 11px #1abc9c; box-shadow:2px 10px 11px #1abc9c;}
我们将阴影模糊化处理了一些，你自己也可以修改相关的数值进行调整达到自己想要的效果。
最后关于的box-shadow说明： box-shadow:阴影水平偏移值(可取正负值)； 阴影垂直偏移值(可取正负值)；阴影模糊值；阴影颜色
Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333
webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333
Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333
IE不支持Box Shadow(阴影)
