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);
}

咱們對 div#box 添加了 box-shadow 屬性，並指定了三個長度值和一個顏色值。對於這樣的用法，咱們再熟悉不過了。要獲得上圖的效果，瀏覽器渲染引擎其實進行了四步：

1. 以該元素相同的位置和尺寸，畫一個 rgba(0,0,0,0.5) 的矩形。

2. 把它向右偏移 5px，向下偏移 6px。

3. 使用高斯模糊算法對其進行 4px 的模糊處理。

4. 模糊後的矩形與原始元素的交集部分會被裁切掉。

因此，從投影繪製的機制來看，繪製的投影實際上是在元素的上層的。

---

單側投影

box-shadow 不爲人知的第四個參數，稱爲 _擴張半徑_。這個參數會根據指定的值去擴大(當指定負值時)或縮小投影的尺寸。好比，一個 -5px 的擴張半徑會把投影的寬度和高度各減小 10px （即每邊各 5px）。

那麼，當應用一個負的擴張半徑，而它的值恰好等於模糊半徑，那麼投影的尺寸就會與投影所屬元素的尺寸一致，若是不使用偏移參數來移動它，將看不見任何投影。

這正是咱們想要的。

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

咱們給了投影一個正的垂直偏移量，而在另外三側是沒有投影的。

---

雙側投影

目前爲止，還沒法指定投影在水平方向上放大，而在垂直方向上縮小，要實現雙側投影的效果惟一的辦法就是使用兩塊投影來達到目的。

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

未完待續。。。