基于CSS背景径向渐变实现理想无缺陷间隔虚线的技术问询

嘿，我来帮你搞定这个自定义虚线的问题！你的思路用径向渐变实现是完全正确的，但几个细节没处理到位，导致效果不符合预期。咱们一步步来修正：

你原来代码的问题所在 #

• 没有清除<hr>的默认边框样式：你之前设置的border-bottom: 1px dotted Black还会生效，和背景渐变叠加在一起，干扰最终效果；
• 径向渐变的过渡逻辑错误：Black 100%, Black 100%相当于没有做透明过渡，渐变区域全是黑色，自然出不来间隔；
• 冗余的background-position设置：你写了三个位置值但只对应一个渐变，完全没必要，反而容易混淆。

正确的「圣杯虚线」实现代码 #

先给出能完美满足你需求的代码，再解释原理：

html{ margin: 7em; background: #EEE}
article { background: lightblue; height: 100px; padding: 2em}
hr{
  /* 清除所有默认样式，避免干扰 */
  border: none;
  margin: 1em 0;
  /* 固定高度为1px，符合需求 */
  height: 1px;
  /* 核心：用径向渐变绘制单个黑点 */
  background-image: radial-gradient(circle closest-side, black 100%, transparent 100%);
  /* 每个重复单元：1px黑点 + 2px透明间隔 = 总宽度3px，高度1px */
  background-size: 3px 1px;
  /* 水平重复单元，实现100%宽度的虚线 */
  background-repeat: repeat-x;
  /* 让黑点在1px高度的线垂直居中，避免偏移 */
  background-position: 0 center;
}

对应的HTML保持不变：

<article>
 <p> Text </p>
 <hr>
 <p> Text </p>
</article>

代码原理说明 #

• border: none：彻底清除<hr>默认的边框、内边距等样式，确保只有我们定义的背景渐变生效；
• radial-gradient(circle closest-side, black 100%, transparent 100%)：closest-side参数让圆形的直径等于容器的高度（1px），刚好是我们需要的黑点大小；后面的transparent 100%让渐变范围外的区域完全透明，这样每个3px宽的单元里只有最左侧1px是黑点；
• background-size: 3px 1px：定义了每个重复单元的尺寸，完美匹配你要求的「2px透明间隔+1px黑色点」的重复模式；
• repeat-x：让这个单元水平方向重复排列，自然实现100%宽度的虚线，且首尾的点间距也能保持一致（误差在你允许的±3px范围内）。

这样就能得到你想要的「圣杯虚线」效果啦！

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