WonderCSS

详解CSS3物体投影效果Box-Shadow

常用Photoshop的人一定对图层的阴影熟悉非常熟悉,那么在CSS3中为我们推出了一个同Photoshop图层阴影效果类似的新属性: Box-Shadow,现在我们具体的了解下。

物体/图层投影 Box-Shadow 的标准写法如下:

box-shadow:inset 1px 1px 10px rgba(0,0,0,0.8);

参数直观意思为:物体阴影:内阴影(可选,不写为默认的外部阴影) X轴距离 Y轴距离 扩散长度 RGB色值透明度 (R,G,B,A);

Text-Shadow一样它还可以写做:

box-shadow:inset 1px 1px 10px #313131;

参数直观意思为: 文字阴影:内阴影(可选,不写为默认的外部阴影) X轴距离 Y轴距离 扩散长度 16进制颜色值(HEX);

X轴 从左向又 Y轴 从上到下。 X和Y轴为负数的时候方向相反。

当然它还不乏更丰富的变化,如四散多色写法:

box-shadow:-10px 0 10px #f00,10px 0 10px #00f,0 -10px 10px #ff0,0 10px 10px #9c3;

效果为顺时针方向,分别是黄、蓝、绿、红,如图:

Box-Shadow例子

多层叠加:

box-shadow:0 0 10px #f00,0 0 20px #00f;

逐层叠加阴影,不同层次的扩散长度一定要又小变大,不然后面的颜色会遮挡住先前的投影。如图:

Box-Shadow 2

在浏览器支持方面,除了“万恶”的IE 6-8 三个版本,最新版本的各浏览器全部支持Box-Shadow,而且不再需要分别写专有属性如:-webkit -moz了。

By 于湛 发布于 2013.02.6 1,684 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注