本文详解如何通过 overflow: hidden 和 clip-path 技术，精准解决伪元素（如 ::before）在 transform: scaleX() 滑入动画中出现的左上/左下圆角溢出、过渡末尾残留像素缝隙等常见渲染缺陷。
本文详解如何通过 `overflow: hidden` 和 `clip-path` 技术，精准解决伪元素（如 `::before`）在 `transform: scalex()` 滑入动画中出现的左上/左下圆角溢出、过渡末尾残留像素缝隙等常见渲染缺陷。
在使用 transform: scaleX(0) → scaleX(1) 实现伪元素滑动覆盖效果时，开发者常遇到两个典型视觉瑕疵：
- 滑动过程中左角“穿出”容器边框：因伪元素默认不裁剪，缩放起始点（transform-origin: left）处的圆角会短暂突破父容器的 border-radius 边界；
- 动画结束时出现细微白边或色差缝隙：这是由于 scaleX(1) 下伪元素与父容器 border 的像素对齐误差及抗锯齿渲染导致的视觉断层。
根本解法在于双重约束：既限制内容溢出，又精确控制绘制区域。
✅ 正确解决方案
首先，在 .item 容器上添加 overflow: hidden，强制裁剪子级（含伪元素）超出 border-box 的部分：
.item {
width: 400px;
height: 100px;
border: 2px solid black;
border-radius: 15px;
position: relative;
overflow: hidden; /* 关键：阻止伪元素圆角外溢 */
}其次，为伪元素显式定义 clip-path，确保其始终严格贴合容器圆角轮廓，消除因 transform 插值带来的几何失真：
.item::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: red;
border-radius: 15px; /* 保持与容器一致 */
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 推荐更平滑的缓动 */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); /* 精确裁剪为矩形区域 */
}? 为什么 clip-path 不写 inset(0)？
clip-path: polygon(...) 明确限定四角坐标，避免 inset() 在某些浏览器中对 border-radius 的兼容性歧义；同时，它与 border-radius 协同工作更稳定——border-radius 控制视觉圆角，clip-path 控制几何边界，二者互补无冲突。
⚠️ 注意事项与进阶建议
- 避免 transition: all：应仅对 transform 过渡（如 transition: transform 3s），防止 clip-path 或其他属性意外触发动画，引发性能抖动；
- z-index: -1 安全性：确保伪元素位于内容下方且不遮挡文字，但需注意父容器不能是 position: static（已满足 relative）；
- 高 DPI 屏幕适配：若仍见细微缝隙，可微调 border-radius 为 14.9px 或添加 backface-visibility: hidden 提升图层合成精度；
- 无障碍友好：该伪元素仅为装饰，无需 aria-* 属性；若承载语义内容，请改用真实元素而非伪类。
最终效果：滑动过程圆角严丝合缝、无穿透；动画终点零像素缝隙，红底与黑边完美咬合。此方案兼容 Chrome/Firefox/Safari（≥ Safari 15.4），是现代 CSS 动画中处理“带圆角的缩放覆盖”的鲁棒实践。
