CSS秘密花園:單面陰影

《 CSS Secrets 》是 @Lea Verou 最新著作，這本書講解了有關于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus發布一系列相關的讀后感，與大家一起分享。

問題

在Q&A網站上，我看到的關于box-shadow被問得最多的問題是，陰影如何只應用于物體的單側（或雙側，問得比較少）。在 stackoverflow.com 上快速搜索，也能找到將近一千個結果。這是可以理解的，因為單側陰影能呈現出一個比較細微的、但同樣效果逼真的陰影效果。通常情況下，糾結于陰影效果的開發人員甚至會給CSS工作小組發郵件，請求希望能夠有新的像box-shadow-bottom這樣的屬性，來方便他們的開發。但是，這樣的效果完全可以通過巧妙地使用我們已經學習并深深喜愛著的box-shadow屬性來完成。

單面陰影

大多數人使用box-shadow時，都是用三個長度值和一個顏色值作為參數，如下：

box-shadow: 2px 3px 4px rgba(0,0,0,.5);

下面的步驟是一組很好的（盡管技術上并不完全精確）展示這些陰影繪制過程的方法：

• 使用一個rgba(0,0,0,.5)、并有相同的尺寸和位置的矩形作為我們的元素。
• 將其向右移動2px，向下移動3px。
• 使用高斯模糊算法（或類似的算法）模糊了4px。也就是說，在陰影顏色和完全透明的這個邊緣的陰影的顏色過渡，大約只是模糊半徑的兩倍（在我們的示例中，8px）。
• 在模糊的矩形與我們的初始元素相交的地方，對模糊矩形進行裁剪，這樣它就變成是在初始元素“后邊”了。這和大多數作者設置陰影的方法（在元素下方放置一個模糊矩形）有些不一樣。但是，在一些使用情況下，有一點內容需要重視，元素的下方并沒有繪制任何陰影。比如說，我們給元素設置一個半透明的背景，我們不會在下邊看到陰影。這和text-shadow不一樣，文本下方并沒有裁剪。

使用4px的模糊半徑是指：陰影的尺寸比我們的元素的尺寸約大4px，這樣在元素的每一側都會有部分陰影顯示。我們可以改變偏移量來隱藏左側和頂部的陰影，通過把偏移量增加至少4px。但是這會導致出現一個太顯影的陰影，看起來就不好看了。還有，盡管這不是什么大問題，但是還記得不？我們想要的陰影是只在一個側面的，不是兩個側面。

嘗試將偏移量的值設置和模糊半徑的值相等，將頂部和左側的陰影隱藏。

解決方法是鮮為人知的第四個長度參數，在模糊半徑(blur radius)后邊指定，也就是所謂的擴散半徑(spread radius)。擴散半徑能夠按照你指定的數字，增加或減少（值為負數）陰影的大小。比如說，一個-5px的擴散半徑能把陰影的width和height減少10px（每一邊5px）。

它的邏輯是，如果我們應用一個負數的擴散半徑，但是絕對值和模糊半徑相等，那么陰影會和它應用的元素有完全相同的尺寸。除非我們使用偏移量（前兩個長度參數）來移動它，否則我們就看不見它啦（被元素正好擋在身后）。因此，如果我們施加垂直方向的正向偏移，我們只會在元素底部看到陰影，其它側面都沒有，這正是我們想要的效果：

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

你可以在下圖中看到效果：

相鄰兩側的陰影

另一個常見的問題是，把陰影應用到兩側。如果兩側是相鄰的（比如說，右側和底部），那就比較容易實現了：你可以做一個像下圖那樣的效果：

也可以應用上一節中討論的一些技巧，但有以下一些不同之處：

• 我們不希望通過收縮陰影來完成兩側的模糊，而只是一側。因此，我們把擴散半徑(spread radius)的絕對值設置為模糊半徑(blur spread)的一半即可。
• 因為我們想要在水平和垂直方向都移動陰影，我們需要設置兩個偏移值。因為我們想要在另外兩側隱藏余下的陰影，所以偏移值必須大于或等于模糊半徑的一半。

比如說，這是我們為右側和底部應用一個black 6px陰影的代碼：

box-shadow: 3px 3px 6px -3px black;

你可以在下圖中看到效果。

對側的陰影

如果我們想要在兩個相對側的陰影就比較麻煩了，比如說左側和右側。因為擴散半徑應用在所有方向都是等同的（如，沒有辦法可以直接幫我們完成陰影在水平方向的延伸、垂直方向的收縮的話），我們的唯一辦法就是使用兩個陰影，一側一個陰影。然后，我們基本上就可以采用前面介紹的“單側陰影”一節的方法來完成，應用兩次即可：

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

你可以在下圖中看到效果：

對側陰影box-shadow

</div>

來自： http://www.w3cplus.com/css3/css-secrets/one-sided-shadows.html