drop-shadow 是 CSS filter 函数，需作用于具备层叠上下文的外层容器而非 contenteditable 元素本身；直接添加常因无独立渲染上下文、子内容穿透或 Shadow DOM 隔离而失效，正确做法是用 isolation: isolate 的定位容器包裹编辑器，并通过伪元素应用 drop-shadow 以确保轮廓贴合与空间预留。
drop-shadow 是 CSS filter 的一个函数，不是 HTML 编辑器原生支持的“组件属性”，它无法直接让编辑器自身“悬浮”或“沉浸”，而是作用于编辑器容器（比如 <div> 或 <textarea> 外层包装元素）的渲染效果。想实现视觉上“悬浮感强、边缘柔和、有深度”的沉浸式体验，关键不在编辑器内部逻辑，而在如何精准包裹、隔离并控制滤镜作用域。
为什么直接给 contenteditable 元素加 drop-shadow 常常失效
多数现代 HTML 编辑器（如 Quill、Tiptap、Slate 封装的 DOM 容器）依赖 contenteditable 元素，而该元素本身不产生独立层叠上下文（stacking context），且其子内容（如用户输入的文本节点、内联元素）会“穿透”滤镜——drop-shadow 只对元素自身盒模型及其**绘制边界内的像素**生效，不对内部动态生成的内容做深度合成。
- 直接写
style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));"在contenteditable元素上，阴影可能被裁剪、边缘锯齿、或随光标闪烁跳动 - 若编辑器使用 Shadow DOM（如部分 Web Component 封装），
filter默认不穿透 shadow boundary，必须显式加在 host 元素上 -
drop-shadow不支持inset，无法模拟内凹悬浮；若需“嵌入感”，得配合box-shadow双用
正确包裹方式：用定位容器 + 层叠上下文隔离
真正可控的做法是把编辑器放进一个具有明确尺寸、定位和层叠上下文的外层 <div>，再对其应用 drop-shadow。这个容器要“包得住”所有浮动 UI（如 toolbar、mention 弹层、代码块高亮背景）。
- 外层容器设
position: relative和isolation: isolate（确保滤镜不与页面其他元素混合） - 编辑器主体（如
<div id="editor">）设position: relative和z-index: 1，避免被阴影遮盖自身边框 - 阴影用
drop-shadow(0 6px 16px rgba(0,0,0,0.12))，比box-shadow更贴合内容轮廓，尤其适合圆角/不规则容器 - 如果编辑器高度动态变化（如自动增长），避免给外层容器设固定
height，改用min-height+padding预留阴影空间
<div class="editor-container"> <div id="editor" contenteditable="true"></div> </div>
.editor-container {
isolation: isolate;
position: relative;
padding: 8px; /* 阴影需要留白，否则被裁 */
}
.editor-container::before {
content: "";
position: absolute;
inset: -8px;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
pointer-events: none;
}与 box-shadow 混用时的取舍要点
drop-shadow 渲染的是元素实际 Alpha 通道轮廓，box-shadow 渲染的是矩形盒模型。当编辑器含圆角、图片、SVG 或透明背景代码块时，二者表现差异明显：
立即学习“前端免费学习笔记（深入）”；
- 仅用
drop-shadow：阴影能绕过圆角、贴合文字边缘，但无法控制模糊半径与偏移的独立缩放（参数耦合） - 仅用
box-shadow：性能更好、兼容性更广（IE11+），但遇到border-radius: 12px时阴影仍是直角矩形，破坏沉浸感 - 推荐组合：
box-shadow负责基础悬浮（0 2px 8px rgba(0,0,0,0.08)），drop-shadow叠加在外层伪元素上负责“轮廓贴合”（0 4px 24px rgba(0,0,0,0.06)），用不同透明度错开层次 - 注意：Chrome 中连续多个
filter会触发额外合成层，若编辑器滚动卡顿，优先降级为单层drop-shadow+will-change: transform优化
真正难的不是加一行 filter，而是判断阴影该加在哪一层、是否要预留绘制空间、以及如何不让它干扰编辑器自身的 focus 状态和滚动行为。很多“沉浸感”破功，其实是因为 toolbar 浮层的 z-index 比阴影层还低，或者父容器 overflow: hidden 把阴影直接裁掉了。
