Box-shadow常被遗忘的一个参数——“spread”

妖狐艹你老母 2022-08-07 08:50 275阅读 0赞

讨论的主题就是：

box-shadow: 0 10px 10px #ccc;

和

box-shadow: 0 10px 10px -10px #ccc;

这两种写法哪种是正确的。一开始我以为第二种是错误的写法，但找到相关教程，才恍然大悟，原来上面的两种写法都是正确的。为什么会造成这样的错误的想法呢？在我看来是我们把“box-shadow”中的第四个可选参数“扩展阴影半径——spread”给遗忘了。那么我们今天就一起来重点学习这个可选参数，让我们在今后的运用中不在把人家给忘了，因为忘了将会是你的损失。

首先我们一起来回忆一下其具体的语法：

E { box-shadow: ??||}
    			也就是：
    			E { box-shadow:inset x-offset y-offset blur-radius spread-radius color}
    			换句说：
    			对象选择器 { text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

详细的介绍可以点击[这里][Link 1]。

接下来我们来看一个实例效果的对比：

.box1 { box-shadow: 0 0 10px #555; }
    			
    			.box2 { box-shadow: 0 0 10px 10px #555; }

[![box-shadow-spread-1.png][]][box-shadow-spread-1.png 1]

正如上图所示，这个曾被我们遗忘的“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-spread-2.png][]][box-shadow-spread-2.png 1]

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

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

allowfullscreen="allowfullscreen" src="http://jsfiddle.net/w3cplus/mEvck/embedded/" frameborder="0" style="box-sizing: inherit; width: 752px; margin: 0px auto; height: 300px;">

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

最后我在啰嗦一点：大家看过这篇文章后，我希望大家和我一样从此记住“[CSS3 box-shadow][Link 1]不仅仅只有【投景方式：外阴影或内阴影】、【X轴偏移量：x-offset】、【Y轴偏移量：y-offset】、【阴影模糊半径：blur-radius】和【阴影颜色：color】，它还有一个常被我们遗忘的另外一个值——【阴影扩展半径：spread-radius】。我们可以通过【spread-radius扩展半径】来控制阴影的扩展方向：扩展半径有两个值，如果取值为正值，则个阴影会向外扩展，如果你给其取负值，整个阴影向内缩小。如此可以通个这个值配合阴影的模糊半径来制作单边的不同阴影效果，而且不会影响其他边的效果。或者换句简单的点，可以使用他制作单边投影效果。”

[Link 1]: http://www.w3cplus.com/content/css3-box-shadow
[box-shadow-spread-1.png]: /images/20220805/3732230661ab4a6f8cbd391bd1bffe29.png
[box-shadow-spread-1.png 1]: http://jsfiddle.net/w3cplus/qKUdA/
[box-shadow-spread-2.png]: /images/20220805/48484384b7854741b36bbea51867356b.png
[box-shadow-spread-2.png 1]: http://jsfiddle.net/w3cplus/F7uNW/
[conceptboard.github.com]: http://conceptboard.github.com/box-shadow-spread-examples/