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

 2016-10-02 08:53

在网络上,最常问道的就是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;
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: