CSS视觉效果

title: CSS视觉效果
date: 2016-12-17
tags: CSS Secrets

0x00 投影的绘画机制

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

比如:

#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）。

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

这正是我们想要的。

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

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

单侧投影

双侧投影

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

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

双侧投影

未完待续。。。