带border-radius的父容器与hover子元素间1px间隙问题及解决方法

问题描述 #

当父容器设置了background-color和border-radius CSS样式时，其hover状态的子元素与父容器之间会出现1px的间隙，需要让该hover子元素完全覆盖父容器。

示例代码 #

CSS代码 #

.parent{
    position: relative;
    background-color: black;
    border-radius: 50px;
    height: 200px;
    width: 200px;
    overflow: hidden;
    border: none;
}
.child1, .child2 {
    width: 100%;
    height: 50%;
}
.parent:hover .hover-child{
  display: block;
}
.hover-child{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
}

HTML代码 #

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="hover-child"></div>
</div>

解决方案 #

以下几种方法都能解决这个间隙问题：

• 方法一：让子元素匹配父容器圆角
  给.hover-child添加与父容器相同的border-radius，让子元素圆角和父容器完全对齐，避免圆角区域露出父容器背景：

  .hover-child{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50px; /* 和父容器圆角值一致 */
  }
  

• 方法二：扩大子元素尺寸覆盖间隙
  将子元素的宽高各增加2px，同时把定位的left和top设为-1px，让子元素超出父容器1px，彻底覆盖间隙区域：

  .hover-child{
    display: none;
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-color: white;
    border-radius: 50px; /* 可选，保持圆角一致更美观 */
  }
  

• 方法三：开启硬件加速优化渲染
  给父容器添加transform: translateZ(0)开启硬件加速，修复浏览器渲染圆角时产生的细微间隙：

  .parent{
      position: relative;
      background-color: black;
      border-radius: 50px;
      height: 200px;
      width: 200px;
      overflow: hidden;
      border: none;
      transform: translateZ(0);
  }
  

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