当两个带有圆角的 div 重叠时，底层元素的圆角边缘可能因渲染精度问题意外透出，产生视觉毛刺；使用 CSS mask 属性替代 overflow: hidden 可彻底消除该问题，实现更精准的边界裁剪。
当两个带有圆角的 div 重叠时，底层元素的圆角边缘可能因渲染精度问题意外透出，产生视觉毛刺；使用 css `mask` 属性替代 `overflow: hidden` 可彻底消除该问题，实现更精准的边界裁剪。
在构建卡片式交互组件（如悬停展开信息面板）时，开发者常通过 border-radius + overflow: hidden 来约束子元素溢出，但这种组合在 Chrome 等浏览器中易引发“圆角毛刺”——即后层圆角元素的微小像素边缘穿透前层，尤其在 transform 动画过程中更为明显。根本原因在于 overflow: hidden 仅作用于盒模型边界裁剪，而 GPU 渲染对复合层中圆角边界的抗锯齿处理存在精度偏差。
推荐解决方案：用 mask 实现语义化、高保真裁剪
div.testCard {
height: 250px;
width: 250px; /* 或使用 aspect-ratio: 1 */
border-radius: 8px;
/* 关键：用 mask 替代 overflow: hidden */
mask: linear-gradient(#000 0 0);
background: #00f;
transition: all .2s ease;
position: relative; /* 保持定位上下文 */
}
div.info {
position: absolute; /* 建议改为 absolute，避免文档流干扰 */
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 24px 16px;
background: #f3f3f3;
border-radius: 8px; /* 保留自身圆角 */
transition: transform .4s cubic-bezier(.17, .67, .5, 1.03) .15s;
transform: translateY(300px);
}
div.testCard:hover .info {
transform: translateY(-80px);
}
✅ 优势说明：
-
mask: linear-gradient(#000 0 0)创建一个全黑不透明遮罩，等效于「仅显示border-radius定义的可视区域」，且由合成器直接处理，规避了overflow的渲染管线缺陷； - 不依赖
position: relative+overflow: hidden的层叠副作用，子元素transform更稳定； - 兼容现代浏览器（Chrome 82+、Firefox 90+、Safari 15.4+），可配合
@supports (mask: ...)安全降级。
⚠️ 注意事项：
- 若需支持 Safari 旧版本，可添加
-webkit-mask前缀； -
mask会禁用部分overflow行为，确保.info使用position: absolute并显式设置宽高，避免布局塌陷； - 避免在
mask元素上同时设置clip-path，二者叠加可能导致性能下降或兼容性异常。
此方案不仅修复视觉毛刺，更提升了动画流畅度与跨浏览器一致性，是现代 CSS 圆角裁剪的最佳实践之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
