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 鮮為人知的第四個參數(shù)，稱為 擴張半徑。這個參數(shù)會根據(jù)指定的值去擴大(當指定負值時)或縮小投影的尺寸。比如，一個 -5px 的擴張半徑會把投影的寬度和高度各減少 10px （即每邊各 5px）。
那么，當應用一個負的擴張半徑，而它的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬元素的尺寸一致，如果不使用偏移參數(shù)來移動它，將看不見任何投影。
這正是我們想要的。
box-shadow: 0px 5px 4px -4px black;
我們給了投影一個正的垂直偏移量，而在另外三側是沒有投影的。
單側投影
雙側投影
目前為止，還無法指定投影在水平方向上放大，而在垂直方向上縮小，要實現(xiàn)雙側投影的效果唯一的辦法就是使用兩塊投影來達到目的。
box-shadow: 6px 0px 5px -4px yellow,
-6px 0px 5px -4px green;
雙側投影
未完待續(xù)。。。
