CSS3阴影效果怎么加_textshadow和boxshadow区别【技巧】

这种特性决定了它的应用边界。常见的一个误区是，试图用 text-shadow 来模拟按钮或卡片的悬浮阴影，结果往往不尽人意——要么阴影只附着在文字上，点击区域毫无立体感；要么阴影被父容器的 overflow 属性裁剪，视觉上完全失效。

它的语法很直接：text-shadow: h-offset v-offset blur-radius color。目前，它不支持阴影扩展半径（spread-radius），也不支持内阴影（inset）。虽然CSS4草案提出了多层阴影的写法，但兼容性尚不理想。从性能角度看，text-shadow 属于独立的渲染层，通常性能开销较小，非常适合用于标题、Logo或图标字体等小范围文字的装饰效果，比如发光、浮雕或轻微描边。

box-shadow：构建立体界面的“主力军”

而 box-shadow 才是为整个元素盒模型添加阴影的正统方法。它的作用范围是元素的边框盒（border box），包含了边框但不包括外边距。因此，它能真实地模拟出“浮起”、“凹陷”、“卡片投影”这类UI效果，是构建现代界面阴影的主力。

它的语法也更强大：box-shadow: h-offset v-offset blur-radius spread-radius color。多出来的 spread-radius 参数是关键，它能控制阴影的扩张或收索，这是 text-shadow 所不具备的。更重要的是，通过添加 inset 关键字，可以轻松实现内阴影效果，完美模拟按钮按下时的凹陷感。

它支持用逗号分隔来定义多个阴影，这为实现复杂效果提供了可能。例如，可以同时为一个元素添加外部投影和内部高光：box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(255,255,255,0.8)。性能方面，box-shadow 通常不会触发代价高昂的重排（reflow），但需要注意，如果大面积使用模糊半径过大的阴影（比如超过30px），在低端设备上可能会影响绘制的帧率。

如何选择？记住这个核心逻辑

曾经有开发者为了追求视觉效果，用八层 text-shadow 去模拟一个毛玻璃卡片的阴影。虽然乍看有点像，但随之而来的问题一大堆：元素内必须有文字、文字换行后阴影错位、阴影区域不响应鼠标事件、无障碍阅读器识别混乱等等。

那么，到底该怎么选？其实判断逻辑很简单：

• 只要你想让阴影包裹整个可交互区域（比如按钮、卡片、模态框），一律使用 box-shadow。
• 只有当你希望装饰文字本身，为其添加描边、发光或浮雕效果时，才考虑使用 text-shadow。
• 还有一个细节：如果元素会进行CSS变换（如 transform: rotate()），box-shadow 会跟随整个元素一起变换，而 text-shadow 则始终相对于文字基线固定，这可能会导致视觉上的不协调。

进阶方案：filter: drop-shadow()，灵活但有陷阱

除了上面两位，filter: drop-shadow() 也常被提及。它基于元素的Alpha通道生成阴影，因此能完美适配带有圆角或不规则形状（如SVG、PNG透明图标）的元素，看起来非常灵活。

但它本质上是一个图像滤镜，而非盒模型属性，这就带来了一些“坑”：

• 它同样会受到父容器 overflow: hidden 的裁剪。
• 不支持内阴影（inset）和阴影扩展半径（spread-radius）。
• 在Safari的某些旧版本中，对应用了 transform 的元素的阴影位置计算可能有偏差。
• 开启硬件加速后，部分安卓WebView中可能出现阴影闪烁或消失的问题。

因此，它更适合用于一些特殊场景，比如为已经设置了 border-radius 的图片添加更自然的阴影。

/* 推荐仅用于特殊场景，例如给带圆角的图片加自然阴影 */
img.rounded {
  border-radius: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

一个至关重要的细节：层叠上下文

最后，也是最容易被忽略的一点：阴影的视觉层级并非完全由 z-index 决定，而是受制于层叠上下文。

举个例子，即使你给一个子元素设置了非常醒目的 box-shadow，如果它的父容器因为设置了 opacity 小于1、transform、filter 或 will-change 等属性而创建了一个新的层叠上下文，那么这个子元素的阴影就可能被“截断”在父容器的边界之内，无法按预期显示在其他上层元素之上。理解这一点，对于调试复杂的布局重叠问题至关重要。