iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

CSS Secrets 導讀系列 第 20

Secret 15: 單邊陰影

大部分的人用三個長度值和一個顏色值來做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-xoffset-y值都至少設4px來隱藏上方和左方的陰影,但這樣就會令我們的陰影看起來不自然。

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

所以說只要spread-radiusblur-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


上一篇
Secret 14: 簡單的圓餅圖 (SVG)
下一篇
Secret 16: 異常的陰影
系列文
CSS Secrets 導讀30

尚未有邦友留言

立即登入留言