Chrome 浏览器在拖拽（draggable="true"）元素时，因渲染层叠加机制导致 border-radius 视觉失效（出现白边/直角），该问题与 Tailwind 无关，本质是 Chrome 的合成层（compositing）行为所致；通过强制触发 GPU 加速（如添加任意 transform）可修复。
chrome 浏览器在拖拽（`draggable="true"`）元素时，因渲染层叠加机制导致 `border-radius` 视觉失效（出现白边/直角），该问题与 tailwind 无关，本质是 chrome 的合成层（compositing）行为所致；通过强制触发 gpu 加速（如添加任意 `transform`）可修复。
在 Chrome 中实现带圆角的可拖拽元素时，开发者常遇到一个视觉 Bug：元素本身设置了 border-radius（例如 Tailwind 的 rounded-lg），但在拖拽过程中，当元素悬停覆盖自身或相邻区域时，圆角边缘会意外显示白色直角或锯齿状“白边”——而 Firefox 和 Safari 均无此现象。这并非 CSS 写法错误，也不是 Tailwind 的问题，而是 Chrome 渲染引擎（Blink）对拖拽反馈图层（drag image）的合成处理缺陷：拖拽时浏览器会截取元素快照并置于独立合成层，但该快照默认未启用抗锯齿或未继承父容器的裁剪上下文，导致圆角被忽略。
✅ 根本解决方法：为 draggable 元素添加任意轻量级 transform
只需为元素声明一个不改变视觉效果的 transform，即可强制 Chrome 将其提升至独立 GPU 图层，并正确应用 border-radius 裁剪。推荐使用：
<div
draggable="true"
class="w-32 h-32 bg-blue-500 rounded-xl shadow-md
transform skew-x-0" <!-- ✅ 关键：skew-x-0 触发硬件加速 -->
>
Drag me!
</div>其他等效写法（任选其一即可）：
- translate-z-0（最常用，语义清晰）
- scale-100
- rotate-0
- translate-x-0
⚠️ 注意事项：
- 不要使用 transform: none —— 它无法触发图层提升；
- 避免在拖拽中动态移除 transform，否则 Bug 可能复现；
- 若使用 React/Vue 等框架，请确保 transform 类始终存在（不要条件性移除）；
- 此方案兼容所有现代浏览器，且无性能负担（skew-x-0 或 translate-z-0 是零成本变换）。
? 总结：这是一个典型的浏览器渲染特性差异问题。与其绕行（如用 outline 模拟圆角、或改用 dragstart 手动绘制拖拽预览），不如采用「最小干预」原则——仅添加一个无副作用的 transform，即可让 Chrome 正确渲染圆角拖拽效果，简洁、可靠、零侵入。
