大部分的人用三個長度值和一個顏色值來做CSS陰影

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

這個樣式實際上包含下面的步驟：

1. 先做出一個rgba(0,0,0,.5)的四邊形，大小和元素一樣。
2. 把陰影向右移動2px，向下移動3px。
3. 把陰影加上4px的高斯模糊，
4. 最後裁切掉陰影與元素交集的部分，讓它看起來像是被元素覆蓋在下面。所以box-shadow並非在元素底下製作出陰影來，這和一般人想像的不一樣。

第三個值blur-radius: 4px表示我們的陰影比原本元素在四個邊各往外多了4px，超過的部分會從元素的四邊跑出來，所以在範例裡面其實上方有2px的陰影（4px - 2px），左邊有1px的陰影（4px - 3px）。因為我們的目標是要做單邊陰影，所以其他三個邊一定要完全把陰影藏起來，或許你會想把offset-x和offset-y值都至少設4px來隱藏上方和左方的陰影，但這樣就會令我們的陰影看起來不自然。

解決方法是在box-shadow較不為人知的「第四個值」spread-radius，這個值能控制陰影的尺寸，使陰影不必要和元素有相同的大小。這個值是正的話會同時向四個邊增加同一個長度，如果是負值則會同時減少長度。假設spread-radius: -5px，表示陰影的長寬都會減少10px，因為四個邊各少5px。

所以說只要spread-radius和blur-radius的值是相反的，那麼陰影即使多了blur也會和本來的元素相同大小，然後只要朝要有陰影的那一邊增加offset-*值就可以了。

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

在相對的二邊製造陰影

因為spread-radius同時影響四個邊，唯一的方法是用二個在一開始示範的陰影做法，分別用在二個邊上。

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

CodePen