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