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. 阴影是否被切除。盒子阴影会被切除，但文字阴影不会。

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）