drop-shadow更适合模拟组件深度感，因其基于实际像素轮廓投射阴影，能精准贴合圆角、透明区域及svg路径；box-shadow仅作用于矩形盒模型，无法感知内容形状与透明度，导致阴影生硬、漏边。
drop-shadow 为什么比 box-shadow 更适合模拟组件深度感
drop-shadow 是 CSS filter 函数，作用于元素的实际像素轮廓，能跟随圆角、透明区域、SVG 路径真实投射阴影；而 box-shadow 只包围矩形盒模型，对 border-radius 或 alpha 通道不敏感。当你有带透明背景的图标、裁剪过的头像、或非矩形卡片时，用 box-shadow 会漏掉边缘、生硬锯齿，drop-shadow 才能自然过渡。
- 阴影只出现在内容“有像素”的地方，不会在透明区域扩散
- 支持多层叠加：多个
drop-shadow()可写在同一filter值里，实现远近分层（比如浅灰近影 + 深灰远影） - 不影响文档流，也不触发重排（re-layout），比伪元素 +
box-shadow更轻量
在 HTML 编辑器中给可编辑组件加 drop-shadow 的实操要点
编辑器里常要动态给 div[contenteditable]、figure 插入块、或自定义组件（如 my-card）加深度效果。直接写内联 style="filter: drop-shadow(...)” 很容易出问题：
- 用户粘贴富文本时可能覆盖或清空
filter - 编辑器运行时生成的临时 wrapper 元素（如 ProseMirror 的
node-view）可能没继承样式 - SSR 渲染和客户端 hydration 后，
filter在某些浏览器（尤其是旧版 Safari）下会闪烁或失效
建议统一用 class 控制，例如：
.depth-1 { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.depth-2 { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)) drop-shadow(0 8px 24px rgba(0,0,0,0.1)); }
- 给组件 DOM 添加 class 时，确保它位于编辑器 content root 下，且不被编辑器的样式隔离机制（如 Shadow DOM 或 scoped CSS）意外屏蔽
- 避免用
!important，改用更具体的选择器，比如.editor .my-card.depth-2 - 如果组件支持主题色，把
rgba()中的 alpha 值抽成 CSS 变量：filter: drop-shadow(0 4px 12px rgba(0,0,0,var(--shadow-alpha, 0.15)));
drop-shadow 的常见失真与绕过方式
drop-shadow 看似简单，但在真实编辑场景中容易翻车：
-
模糊半径过大导致边缘发虚：尤其在高 DPI 屏幕上，
drop-shadow(0 0 20px ...)会让小图标完全糊掉。建议最大用到12px，再大就拆成两层不同偏移+模糊的阴影模拟景深 -
父容器 overflow: hidden 截断阴影：这是最常被忽略的点。只要父级有
overflow: hidden（编辑器 toolbar、滚动容器、modal body 常见），drop-shadow就会被裁掉。解决方法只有两个：去掉该 overflow，或把组件提升到更高层级（用position: relative; z-index: 10+ 确保祖先无transform/will-change创建新 stacking context） -
Safari 15.4–16.3 对 SVG 内嵌
<use></use>的drop-shadow支持异常：阴影可能不渲染或错位。临时方案是改用filter: url(#shadow-filter)配合内联<filter></filter>定义
性能敏感场景下的取舍建议
filter 属于合成层操作，但频繁变化（比如拖拽中实时更新 drop-shadow 偏移）仍会触发 GPU 重绘，低端设备易卡顿：
- 不要在
mousemove或scroll中直接改filter值，改用transform: translateZ(0)触发硬件加速，再配合固定 class 切换 - 深度感不需要每帧更新：用
:hover、:focus-within或编辑器的selectedclass 触发，比 JS 动态计算更稳 - 如果组件本身已用
will-change: transform，别再叠加filter—— 两者共存会强制创建额外合成层，内存占用翻倍
真正难的不是写对那行 drop-shadow，而是让它的像素落在该落的地方、不被裁、不闪、不拖慢编辑器响应。这些细节藏在父容器的 overflow、祖先的 stacking context、甚至 Safari 的 SVG 实现里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
