不同颜色左右边框+圆角的Safari渲染问题及Chrome白边修复需求

问题描述 #

需要实现一个仅左右两侧带有不同颜色边框、四角均为圆角的盒子，但存在跨浏览器渲染问题：

• Chrome浏览器：角落存在细微白色细边，其余显示正常；
• Safari浏览器：左侧边框圆角被截断，还会出现右侧边框颜色的直线（更改颜色后明显可见）。

原代码 #

HTML #

<article>
  <div class="t">Box</div>
  <div class="c">Content</div>
</article>

CSS #

body
{
  background-color: #eee;
}

article
{
  background-color: white;
  width: 10em;
  
  border-radius: 1em;
  overflow: hidden;
  
  border-left: 5px solid #00aaa1;
  border-right: 5px solid #005b74;
}

.t
{
  color: white;
  background-image: linear-gradient(90deg, #00aaa1, #005b74);
}

.t, .c {padding: 0.5em;}

解决方案 #

通过伪元素替代原生border属性，规避浏览器的渲染bug，同时消除Chrome的白边问题：

修改后的CSS #

body {
  background-color: #eee;
}

article {
  background-color: white;
  width: 10em;
  border-radius: 1em;
  overflow: hidden;
  position: relative; /* 为伪元素提供定位上下文 */
}

/* 模拟左侧彩色边框 */
article::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: #00aaa1;
}

/* 模拟右侧彩色边框 */
article::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: #005b74;
}

.t {
  color: white;
  background-image: linear-gradient(90deg, #00aaa1, #005b74);
  padding: 0.5em;
  position: relative; /* 确保文字在伪元素上方 */
  z-index: 1;
}

.c {
  padding: 0.5em;
  position: relative; /* 确保文字在伪元素上方 */
  z-index: 1;
}

修复原理 #

1. 放弃原生border-left/right，改用绝对定位的伪元素绘制左右边框，避免Safari对border-radius + overflow:hidden + border组合的渲染异常；
2. 给内容区域设置position: relative和z-index:1，保证文字内容不会被伪元素遮挡；
3. 彻底消除Chrome角落的白边问题，因为原生border与背景的缝隙叠加问题被规避。

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