当两个带有圆角的 DOM 元素重叠时，因 overflow: hidden 的抗锯齿与层叠渲染机制限制，常出现后方元素圆角边缘“透出”或像素级错位的视觉毛刺；使用 CSS mask 属性替代 overflow: hidden 可从根本上规避该问题。
当两个带有圆角的 dom 元素重叠时，因 `overflow: hidden` 的抗锯齿与层叠渲染机制限制，常出现后方元素圆角边缘“透出”或像素级错位的视觉毛刺；使用 css `mask` 属性替代 `overflow: hidden` 可从根本上规避该问题。
在实现卡片悬停展开信息面板（如 .info）的交互效果时，若父容器（.testCard）仅依赖 overflow: hidden + border-radius 来裁剪子元素，浏览器在复合图层渲染中可能因亚像素对齐、GPU 加速策略或抗锯齿采样差异，导致 .info 元素移入时其顶部圆角与父容器底部圆角未能严格对齐——从而暴露出微小的、不属于当前图层的像素残留，即所谓“glitch”。
根本原因在于：overflow: hidden 是布局裁剪行为，不参与绘制阶段的形状精确定义；而 border-radius 仅影响边框和背景的绘制范围，对子元素的几何边界无强制约束。当子元素通过 transform 移动并部分超出父容器时，其自身圆角（如 .info 的 border-radius: 8px）与父容器圆角在视觉上叠加，极易因渲染管线插值误差产生毛刺。
✅ 推荐解决方案：使用 mask 实现精确形状裁剪
CSS mask 属性可在绘制阶段对整个元素（含子元素）应用像素级掩模，确保所有内容严格遵循指定形状（如圆角矩形），彻底避免 overflow: hidden 的渲染不确定性：
div.testCard {
height: 250px;
width: 250px; /* 或使用 aspect-ratio: 1 */
border-radius: 10px;
/* 关键：用 mask 替代 overflow: hidden */
mask: linear-gradient(#000 0 0);
background: #00f;
transition: all .2s ease;
}
div.info {
position: relative; /* 保持定位上下文 */
background: #f3f3f3;
height: 100%;
padding: 24px 16px;
/* 移除自身的 border-radius —— 形状由父级 mask 统一控制 */
transition: .4s cubic-bezier(.17, .67, .5, 1.03) .15s;
transform: translateY(300px);
}
div:hover .info {
transform: translateY(-80px);
}? 为什么
mask: linear-gradient(#000 0 0)有效？
该写法创建一个全黑、无渐变过渡的遮罩层（等效于mask-image: linear-gradient(black, black)），配合默认mask-mode: alpha，使元素完全按border-radius定义的区域显示，且裁剪发生在合成前，无抗锯齿干扰。相比overflow: hidden，mask是绘制级指令，精度更高、兼容性良好（Chrome 59+, Firefox 53+, Safari 15.4+）。
⚠️ 注意事项：
- 移除
.info的border-radius，避免父子圆角冲突；所有圆角视觉应由.testCard的mask+border-radius统一保障； - 若需支持旧版 Safari（-webkit-mask 前缀；
- 不要为
.testCard设置overflow: hidden，它与mask共存可能导致不可预期的裁剪叠加； -
mask不影响事件穿透，交互逻辑无需调整。
通过将“布局裁剪”升级为“绘制掩模”，你不仅能消除圆角重叠毛刺，还能获得更稳定、更符合设计意图的视觉一致性——这是现代 CSS 渲染优化中值得推广的最佳实践。
