浏览器窗口大小变化时solid边框显示为double的问题求助

问题根源 #

你遇到的情况是因为border-image属性会直接覆盖border-style的设置——哪怕CSS里写了border-style: solid，只要border-image存在，它就不会生效。而且当前用border-image实现渐变分隔线的方式，在浏览器窗口宽度变化时，伪元素宽度随之改变，浏览器对border-image的渲染逻辑会导致视觉上出现类似double边框的效果，本质是渐变边框的渲染异常，不是真的切换成了double样式。

修复方案 #

放弃用border-image实现渐变分隔线，改用background-image结合背景属性来实现，这种方式更稳定，不会出现样式错乱：

修改后的CSS代码：

.line-header {
  padding-bottom: 50px;
  font-size: 32px;
}

.line {
  display: flex;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  width: fit-content;
}

.line::before,
.line::after {
  content: '';
  flex: 1;
  height: 1px; /* 控制分隔线的高度 */
}

.line::before {
  background: linear-gradient(to left, black, white);
  margin-right: .5em;
}

.line::after {
  background: linear-gradient(to right, black, white);
  margin-left: .5em;
}

方案说明 #

直接用背景渐变做分隔线，不需要依赖border相关属性，彻底避免了border-image带来的渲染冲突和异常。flex布局下，伪元素宽度变化时，背景渐变会自然拉伸，不会出现类似double边框的视觉问题，同时完全符合你想要的左右渐变分隔线效果。

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