使用overflow:hidden时元素圆角漏显，求已知问题及解决方案

问题本质 #

这是浏览器处理border-radius + overflow:hidden元素时的常见渲染bug，属于CSS视觉渲染的边缘情况。当上层带圆角裁剪的元素与下层元素完全重叠时，浏览器的抗锯齿渲染和裁剪计算可能出现偏差，导致下层元素的圆角边缘透过缝隙显示出来。

可行解决方法 #

方法1：触发GPU加速（推荐） #

给上层元素添加transform属性触发GPU加速，强制浏览器创建独立层叠上下文，优化裁剪渲染：

.box1 {
  border-radius: 50px;
  overflow: hidden;
  /* 添加以下属性 */
  transform: translateZ(0);
}

也可以用transform: scale(1)，效果一致。

方法2：添加不可见轮廓/阴影 #

通过给上层元素添加透明的轮廓或阴影，填补渲染缝隙：

.box1 {
  border-radius: 50px;
  overflow: hidden;
  /* 二选一即可 */
  outline: 1px solid transparent;
  /* 或者 */
  box-shadow: 0 0 0 1px transparent;
}

方法3：微调上层元素尺寸（布局允许时使用） #

让上层元素比下层元素大1px，通过微小偏移完全覆盖边缘：

.box1 {
  width: 201px; /* 原尺寸200px */
  height: 201px;
  margin: -0.5px; /* 居中偏移 */
  border-radius: 50px;
  overflow: hidden;
}

Video.js场景适配 #

针对Video播放器的情况，优先使用前两种方法（不影响布局）。如果尝试叠加圆角div出现边框融合，可给叠加层设置同背景色并禁用交互：

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #fff; /* 与播放器父容器背景一致 */
  pointer-events: none; /* 不干扰播放器操作 */
}

内容的提问来源于stack exchange，提问作者akirat