text-shadow 與 box-shadow 的不一樣之處

text-shadow 與 box-shadow 有兩點不一樣：一個是語法，另外一個是陰影是否會被切除。

語法

box-shadow 語法：

box-shadow: offset-x offset-y blur-radius spread-radius color;
複製代碼

text-shadow 語法：

text-shadow: offset-x offset-y blur-radius color; 
複製代碼

text-shadow 比 box-shadow 少支持了一個參數：spread-radius。

舉個例子：

.elem {
  color: rgb(249, 226, 149);
  text-shadow: 4px 4px 0 #48514c; 
  box-shadow: 4px 4px 0 4px #48514c;
}
複製代碼

.elem 最終表現爲（見下圖）：文字陰影偏移出來的長度是 4px，而盒子陰影的偏移則是 8px（4px 的 x、y 軸偏移 + 4px 的擴散半徑）。

陰影是否被切除

不管是文字陰影或盒子陰影，最開始與元素的尺寸都是徹底同樣的。當設置陰影偏移後，偏移後的陰影與原始元素有一個交集部分。咱們所說的「陰影是否被切除」指的就是這塊交集部分是否被切除。

咱們主要簡單記住便可。

• 文字陰影不會被切除
• 盒子陰影會被切除

咱們對上面的例子稍加修改：

.elem {
  color: rgba(249, 226, 149, .8);
  text-shadow: 4px 4px 0 #48514c;
  
  background-color: transparent;
  box-shadow: 4px 4px 0 4px #48514c;
}
複製代碼

注意：這裏我將 .elem 背景色顯式地設置爲透明瞭（transparent），其實不必這麼作，這樣作是爲了方便對比說明。

就能獲得效果：

咱們發現：文字後面的陰影並無被切換，咱們能透過文字看到後面的陰影；但盒子陰影就不一樣了，雖然元素背景色是透明的，但仍是看不到後面的陰影，這是由於被切除的緣由。

演示連接：codepen.io/zhangbao/fu…

總結

text-shadow 與 box-shadow 有兩個不一樣之處：

1. 語法。text-shadow 比 box-shadow 少支持了一個參數：spread-radius。
2. 陰影是否被切除。盒子陰影會被切除，但文字陰影不會。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）