低版本chrome拖拽时rounded-full失效，因drag image未继承border-radius裁剪；overflow-hidden无效且可能掩盖问题，需用transform:translatez(0)触发gpu合成层，确保圆角正确渲染。
加了 rounded-full 却在低版本 Chrome（如 90–105）里拖拽时变直角，不是类没生效，而是浏览器合成层没正确裁剪圆角——overflow-hidden 不能修复它，反而可能让问题更隐蔽。
为什么 overflow-hidden 对拖拽圆角失效无效
Chrome 拖拽时的圆角白边/直角问题，根源是 drag image 快照未继承父容器的 border-radius 裁剪上下文。此时加 overflow-hidden 只会强制裁掉子内容，但快照本身仍按矩形渲染，视觉上可能更糟：比如文字被意外截断、图标错位，而圆角依然不出现。
-
overflow-hidden作用于元素内容区域，不影响 drag image 的合成行为 - 它甚至可能掩盖真实问题：你误以为“加了就该好”，却忽略了拖拽图层根本不在 DOM 渲染流中
- 若父容器已设
overflow-hidden，再给 draggable 子元素重复加，毫无意义
真正起效的是 transform 触发 GPU 合成
Chrome 需要明确知道这个元素要独立成层，才会把 border-radius 应用到拖拽快照上。一个轻量级 transform 就够了，且不改变布局和视觉。
- 推荐写法：
class="rounded-full draggable-element hover:scale-[1.02] transition-transform"，其中hover:scale-[1.02]已隐含transform - 最简方案：直接加
class="rounded-full [transform:translateZ(0)]"（translateZ(0)是零开销的 GPU 提升指令） - 避免用
transform: rotate(0deg)或scale(1)，部分旧版 Chrome 对这些解析不稳定
配合 rounded-full 使用时的尺寸陷阱
rounded-full 依赖宽高比例才能出正圆，而拖拽过程中的 layout shift 可能临时破坏这个比例，加剧圆角断裂感。
- 务必固定尺寸：
h-10 w-10或aspect-square w-12，别用h-auto或内容撑开高度 - 图片类元素必须加
object-cover和flex-shrink-0，否则拉伸后变成椭圆 - 按钮等交互元素建议加
min-w-[2.5rem]，防止窄屏下宽度塌缩导致rounded-full失效
检查是否被其他样式意外覆盖
Vue/React 中常见逻辑错误：组件状态切换时，rounded-full 被条件 class 覆盖，或与 ring 类冲突（某些 UI 库的 ring 会重置 border-radius）。
- 在开发者工具中检查 computed styles，确认
border-radius确实是9999px，而非被0或其他值覆盖 - 禁用所有
ring-相关类，测试是否恢复；如是，改用outline替代ring - 动态 class 拼接时确保空格分隔，例如
class="${base} ${isRound ? 'rounded-full' : 'rounded-md'}"，别写成'rounded-fullrounded-md'
最易被忽略的一点：这个问题只在拖拽过程中出现，静止状态下一切正常——所以调试必须真机触发 drag 事件，不能只靠 hover 或 devtools 强制状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
