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 属性，并指定了三个长度值和一个颜色值。对于这样的用法，我们再熟悉不过了。要得到上图的效果，浏览器渲染引擎其实进行了四步：
- 以该元素相同的位置和尺寸，画一个
rgba(0,0,0,0.5)的矩形。 - 把它向右偏移
5px，向下偏移6px。 - 使用高斯模糊算法对其进行
4px的模糊处理。 - 模糊后的矩形与原始元素的交集部分会被裁切掉。
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;
双侧投影
未完待续。。。
