Box-shadow的应用技巧分享

01

CSS3框阴影只在一个方向？

CSS3框阴影只在一个方向？

分析：x方向不偏移，设置y方向的偏移，且加上模糊值。 代码如下：

box-shadow: 0 20px 20px #000000;

效果如下图：

x轴方向还是阴影，怎么办呢？

这时，就可以巧用spread-radius外延值, 来消除x轴方向的阴影。

查看文档发现：spread-radius，设置对象的阴影外延值。可以为负值， 模糊值设置，让盒子扩展了20px , 可以将外延值，设置为负，让水平方向阴影取消

代码如下：

box-shadow: 0 20px 20px -20px #000000;

效果如下图：

02

被遗忘的一个参数 — “spread” 外延值

"spread" 改变阴影的大小——其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。

有了这个参数后，我们也可以使用“box-shadow”像photoshop 中的阴影工作一样，制作单边阴影效果：

.box1 {
    box-shadow: -5px 0 5px green, /*左边阴影*/
    0 -5px 5px blue, /*顶部阴影*/
    0 5px 5px red, /*底部阴影*/
    5px 0 5px yellow; /*右边阴影*/
}
 .box2 {
    box-shadow: -5px 0 5px -5px green, /*左边阴影*/
    0 -5px 5px -5px blue, /*顶部阴影*/
    0 5px 5px -5px red, /*底部阴影*/
    5px 0 5px -5px yellow; /*右边阴影*/
}

这里需要注意一点，这个扩展阴影值需要和阴影模糊半径配合使用，一般情况是“扩展阴影半径一般设置为和糊模半径大小，并取其负值”。

上面通过一个实例展示了“box-shadow"中扩展半径的作用和使用，如果你感兴趣的话可以尝试做做下面的效果：

上面的代码来自于：conceptboard.github.com