如何实现自定义虚线长度与间距的CSS边框？

没问题！要实现这种20px实线段+20px间距的虚线边框，完全可以不用自定义背景图，用CSS线性渐变就能完美搞定——还能兼容你设置的圆角效果，比你当前的代码覆盖更全面。

先说说你现有代码的小局限：你用线性渐变只实现了顶部的“伪虚线”，但比例是10px实/10px虚（因为50%的分割），而且只处理了单边。咱们调整一下思路，用多层渐变分别模拟四个边的虚线：

完整实现代码 #

.element {
  width: 600px;
  height: 300px;
  border-radius: 45px;
  /* 四层渐变分别对应上、下、左、右四个边的虚线 */
  background-image: 
    linear-gradient(to right, red 20px, transparent 20px),
    linear-gradient(to right, red 20px, transparent 20px),
    linear-gradient(to bottom, red 20px, transparent 20px),
    linear-gradient(to bottom, red 20px, transparent 20px);
  /* 控制每个虚线循环单元的尺寸：上下边是40px宽（20实+20虚）、1px高；左右边是1px宽、40px高 */
  background-size: 40px 1px, 40px 1px, 1px 40px, 1px 40px;
  /* 把渐变定位到四个边的起始位置 */
  background-position: top left, bottom left, top left, top right;
  /* 对应边的重复方式：上下边横向重复，左右边纵向重复 */
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  /* 让渐变从边框区域开始绘制，配合border-radius不会出现直角断裂 */
  background-origin: border-box;
  /* 可选：给元素加内边距，避免文字贴到边框上 */
  padding: 20px;
}

<div class="element">TEXT TEXT</div>

关键细节解释 #

• 渐变逻辑：每一层渐变都是[颜色 实线长度, 透明色 间距长度]，精准控制20px实、20px虚的比例。
• 尺寸与定位：通过background-size定义单个虚线循环单元的大小，再用background-position把渐变放到对应边框的位置，最后用background-repeat让它铺满整个边。
• 圆角兼容：background-origin: border-box是关键，它让渐变沿着边框的圆角轮廓绘制，不会在圆角处出现生硬的直角断层。

灵活调整 #

如果需要修改样式，直接调整对应参数即可：

• 改变虚线颜色：替换渐变里的red为你需要的颜色。
• 调整虚线粗细：把background-size里的1px改成你想要的粗细（比如2px），同时保持40px的循环宽度/高度不变。
• 修改虚线/间距比例：比如要30px实、10px虚，就把渐变里的20px改成30px，background-size改成40px 1px（30+10）。

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