如何解决带border-radius的dashed边框跨浏览器短划线间距不一致问题

问题根本原因 #

CSS标准未对dashed、dotted类型边框的短划线长度、间隙距离做强制统一要求，各浏览器内核的默认渲染逻辑存在差异，搭配非对称border-radius属性时，渲染差异会进一步被放大，是这类问题的核心诱因。

推荐解决方案：用背景模拟代替原生边框 #

该方案可以完全自定义短划线的长度、间距，所有浏览器渲染效果100%一致，也能完美适配圆角效果：

方案1：元素本身无自定义背景时直接修改背景属性 #

替换原有.border样式即可：

.border {
  /* 移除原生虚线边框 */
  border-left: none;
  /* 线性渐变模拟左侧虚线：黑段占50%，透明段占50% */
  background-image: linear-gradient(to bottom, #000 50%, transparent 50%);
  /* 背景尺寸：宽度2px对应原边框宽度，高度8px即每段4px实线+4px间隙，可自行调整 */
  background-size: 2px 8px;
  /* 定位到左侧，沿Y轴重复 */
  background-position: left 0 top 0;
  background-repeat: repeat-y;
  /* 保留原有圆角 */
  border-radius: 10%/200px;
}

方案2：元素本身有自定义背景时用伪元素实现 #

避免背景和元素原有背景冲突：

.border {
  position: relative;
  border-radius: 10%/200px;
  /* 保留元素其他原有样式 */
}
.border::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-image: linear-gradient(to bottom, #000 50%, transparent 50%);
  background-size: 2px 8px;
  border-radius: inherit; /* 继承父元素圆角，完美贴合 */
}

样式自定义规则 #

• 调整background-size的第二个数值即可修改短划线和间隙的总长度，比如改为2px 12px就是6px实线+6px间隙
• 要修改短划线和间隙的比例，调整linear-gradient的百分比即可，比如linear-gradient(to bottom, #000 33.3%, transparent 33.3%)就是1/3实线，2/3间隙

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