一切福田,不離方寸,從心而覓,感無不通。

CSS3属性之二:box-shadow

 

语法:

box-shadow<length> <length> <length> <length> || <color>

取值:

<length> <length> <length>? <length>? || <color>
阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色 

说明:

设置块阴影

box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。

box-shadow的四个参数:

x-offset                         x轴偏移

y-offset                         y轴偏移

blur                            模糊值

color of shadow               阴影颜色

下面来看一个例子,代码如下:

运行效果如下(Chrome中):

还可以一次运用多个box-shadows,这样做会产生一些有趣的效果,看下面这个例子:

运行效果如下(Chrome中):

可以看到,有两个颜色的阴影。

看下面一个例子:为下面这张图片添加阴影,让其有立体感:

运行效果如下(Chrome中):

以前我吗需要在photoshop中把图片做成这样的效果,现在可以直接用CSS代码来实现了。

 

转自:http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html