--愿你内心有种不灭的火焰,将你与别人区分开来--

0%

CSS视觉效果

CSS CSS视觉效果

0x00 投影的绘画机制

当为一个元素添加 box-shadow 时,我们便会从视觉上得到一个投影的效果。

比如:

1
2
3
4
5
6
#box{
width: 100px;
height: 100px;
background: deeppink;
box-shadow: 5px 6px 4px rgba(0,0,0,0.5);
}

box-shadow

我们对 div#box 添加了 box-shadow 属性,并指定了三个长度值和一个颜色值。对于这样的用法,我们再熟悉不过了。要得到上图的效果,浏览器渲染引擎其实进行了四步:

  1. 以该元素相同的位置和尺寸,画一个 rgba(0,0,0,0.5) 的矩形。
  2. 把它向右偏移 5px,向下偏移 6px
  3. 使用高斯模糊算法对其进行 4px 的模糊处理。
  4. 模糊后的矩形与原始元素的交集部分会被裁切掉。

box-shaow的绘制原理

所以,从投影绘制的机制来看,绘制的投影其实是在元素的上层的。

单侧投影

box-shadow 鲜为人知的第四个参数,称为 扩张半径。这个参数会根据指定的值去扩大(当指定负值时)或缩小投影的尺寸。比如,一个 -5px 的扩张半径会把投影的宽度和高度各减少 10px (即每边各 5px)。

那么,当应用一个负的扩张半径,而它的值刚好等于模糊半径,那么投影的尺寸就会与投影所属元素的尺寸一致,如果不使用偏移参数来移动它,将看不见任何投影。

这正是我们想要的。

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

我们给了投影一个正的垂直偏移量,而在另外三侧是没有投影的。

单侧投影

双侧投影

目前为止,还无法指定投影在水平方向上放大,而在垂直方向上缩小,要实现双侧投影的效果唯一的办法就是使用两块投影来达到目的。

1
2
box-shadow: 6px 0px 5px -4px yellow,
-6px 0px 5px -4px green;

双侧投影