简单的box-shadow单侧双侧投影说明

简单的box-shadow单侧双侧投影说明

 2016-10-02 08:53    网页设计   标签：css   906    发表评论

在网络上，最常问道的就是box-shadow投影问题，就是如何只在元素的一侧(或两侧)设置投影。我们一直想要一个类似的box-shadow-bottom属性，很可惜没有。不过，利用我们属性的box-shadow再加上一点创意就可以完美实现单侧投影了。

单侧投影

大多数人使用box-shadow的方法是，指定三个长度值和一个颜色值：

box-shadow:2px 3px 4px rgba(0,0,0,.5);

上面这段代码是如何让它图形化的呢，下面一一说明下：

1. 以该元素相同的尺寸和位置，画一个rgba(0,0,0,.5)的矩形；

2. 把它向右偏移2px，向下偏移3px；

3. 使用类似高斯模糊将它进行4px的模糊处理；

4. 接下来，模糊后的矩形与元素的交集部分被切掉，因此它看起来像是在改元素的“后面”。这和大多数开发者所理解的情况(元素叠加)有所不同。不过，某些场景下，意识到没有任何投影绘制在元素的下层十分重要。举例来说，如果给元素设置一层半透明的背景，我们就看不到它下层有任何投影。这一点和text-shadow不同。因为文字下层的投影不会被裁切。

使用4px的模糊半径意味着投影的尺寸比元素本身尺寸大约8px，因此投影的最外围会从元素的四面向外显露出来。我们只需改变偏移量，就可以把投影的顶部和左侧隐藏起来，只要这两个方向上的偏移量不少于4px就可以了。但是，这在某种程度上会导致外露的投影太过浓重，看起来不是很美观。

最总解决方案来自box-shadow-bottom鲜为人知的第四个长度参数。它排在模糊半径之后，称为扩张半径。这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。举例来说，一个-5px的扩张半径会把投影的宽度和高度各减少10px(即每边各5px)。

从逻辑上说，如果我们应用了一个负的扩张半径，而它的值刚好等于模糊半径，那么投影就会于投影所属元素的尺寸完全一致。除非用偏移量(前两个长度参数)来移动它，我们将完全看不见任何投影。因此，如果给投影应用一个正的垂直偏移量，我们就会在元素的底部看到一道投影，而元素的另外三侧是没有投影的，这正是我们一直在苦苦追寻的效果：

box-shadow:0 5px 4px -4px black;

领侧投影

另一个问题也经常被问道：如何在两边上设置投影。如果这两边是相邻的，就比较容易一些。我们可以在原有基数上做如下调整：

• 我们不应该把投影缩得太小，而是只需要把隐约隐藏进一侧，另一侧自然露出就好。因此，扩张半径不应设为模糊半径的相反值么，而应该是这个值的一半；

• 需要指定两个偏移量，因为我们希望投影在水平和垂直方向上同时移动。它们的值需求大于或等于模糊半径的一半，因为我们希望把投影影藏进另外两边之内。

box-shadow:3px 3px 6px -3px black;

这个效果明显比我们之前做的效果要好看多了。

双侧投影

当我们想把投影设置在元素的两条对边时，事情就变得辣手了。因为扩张半径在四个方向上的作用是均等的，唯一的办法就是用两块投影来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次：

box-shadow:5px 0px 5px -5px black,
        -5px 0 5px -5px black;