CSS圆角卡片linear-gradient角落漏图问题求助

问题描述 #

制作带渐变遮罩的圆角卡片时，父容器设置overflow:hidden和border-radius后，底部角落出现1px左右的背景色漏出。调整渐变位置无效，确认异常由overflow:hidden引发。

解决方案 #

方案1：给渐变遮罩层添加相同圆角 #

让子元素继承父容器的圆角，对齐裁剪边界，避免边缘渲染溢出：

.project-card-details {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, black 80%);
  border-radius: inherit; /* 继承父容器的圆角值 */
}

方案2：调整父容器的背景裁剪范围 #

给父容器添加1px内边距并设置background-clip: padding-box，限制背景在padding区域内渲染，同时用box-sizing: border-box保持卡片尺寸不变：

.card {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 1rem;
  overflow: hidden;
  background-color: steelblue;
  padding: 1px;
  box-sizing: border-box;
  background-clip: padding-box;
}

方案3：优化渐变遮罩的渲染范围 #

将渐变的终点调整为完全覆盖卡片底部，减少透明过渡区域的渲染偏差：

.project-card-details {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
  border-radius: inherit;
}

原因说明 #

该问题属于浏览器渲染精度bug：当父容器通过border-radius+overflow:hidden裁剪时，子元素的渐变边缘像素可能因为浮点计算偏差，超出父容器的裁剪范围，从而露出底层背景。通过对齐圆角、调整背景渲染范围等方式，可以修正这种像素级的溢出。

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