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 有两个不同之处：

语法。text-shadow 比 box-shadow 少支持了一个参数：spread-radius。
阴影是否被切除。盒子阴影会被切除，但文字阴影不会。