通过CSS3的box-shadow属性设置块阴影

早些时候，我们为了给一个块元素设置阴影的时候，只能通过给该块级元素设置背景来实现，当然在IE下还可以通过微软的shadow滤镜来实现，不过也只在ie下有效，那它的兼容性也就可想而知了。但是CSS3的box-shadow属性的出现使这一问题变得简单了，下面我们来看一下box-shadow属性的具体用法。

box-shadow的语法是这样的：

[box-shadow:inset x-offset y-offset blur-radius spread-radius color;]

用汉语解析就是：

[box-shadow:投影类型 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;]

下面我们分别介绍一下这几个参数：

投影类型：可选值，可取唯一值inset。如果不设置，默认的投影方式是外阴影；如果取值“inset”,就是将外阴影变成内阴影

X轴偏移量：可取正值也可取负值。当取正值时，阴影在对象右边；反之，阴影在对象左边

Y轴偏移量：可取正值也可取负值。当取正值时，阴影在对象下边；反之，阴影在对象上边

阴影模糊半径：可选值。当取0时，其阴影没有模糊效果，取值越大阴影越模糊

阴影扩展半径：可选值，可取正值也可取负值。当取正值时，阴影随取值的增大而变大；当取负值时，阴影随取值的减小而缩小

阴影颜色：可选值，但此值省略时，会取浏览器默认色，各浏览器的默认色不一样

另外，box-shadow还可以使用一个或多个投影，如果使用多个投影时需要用逗号“,”分开，如：box-shadow:3px 3px 5px #666,-2px -2px 4px #ff0000;

好了，理论性的东西基本就这些，下面我们就用代码看下效果吧。我们将对下面的矩形做阴影处理：

CSS代码：

1 2 3 4 5 6 7

...{      ...      -webkit-box-shadow: 3px 3px 5px #666 ; /*为兼容此内核的低版本浏览器*/      -moz-box-shadow: 3px 3px 5px #666 ; /*为兼容此内核的低版本浏览器*/      box-shadow: 3px 3px 5px #666 ; /*x轴偏移3px,y轴偏移3px，阴影模糊半径5px，阴影颜色取#666*/      ... }

实现效果：

我们在上面效果的基础上再加一个阴影扩展半径：

1 2 3 4 5

...{      ...      box-shadow: 3px 3px 5px 2px #666 ;      ... }

实现效果：

我们可以看到阴影大了一些

我们再看一下多阴影处理：

1 2 3 4 5

...{      ...      box-shadow: 3px 3px 5px #666 , -2px -2px 4px #ff0000 , -2px 5px 4px #ff00ff ; /*记着用”,“号隔开*/      ... }

效果如下：

上面的几个都是外阴影，那么内阴影是什么样子的呢？下面我们来看一下。

我们对上面的代码稍作修改，加一个inset:

1 2 3 4 5

...{      ...      box-shadow: inset 3px 3px 5px #ccc ;      ... }

效果如下：

好了，不过多的演示了，你们的创意是无穷的，相信你们可以做出更酷更炫的效果。

来源：http://beyondweb.cn/article_detail.php?id=62