纯 CSS 解决方案，使用 CSS Background Radial-Gradient 实现非混淆、无故障、完美重复的虚线

Question

CSS 布局问题

目前我对我的标准<hr>虚线不满意。 结果与我正在寻找的圣杯虚线相去甚远。

hr{
  border-bottom: 1px dotted Black;
  border-top: none;
  margin: 1em 0;
}

请在单独的窗口中以 100% 的比例打开图像。

这些点太靠近彼此，我不想要带有黑色条纹的虚线。 我想要点，但它们之间的间距更大。

对纯粹难以捉摸的圣杯虚线的渴望（和设计）

在我的梦中，我在我面前看到一条纯 CSS 虚线，就像这张图片（用 Photoshop 制作）一样。

请在单独的窗口中以 100% 的比例打开图像。

满足以下条件的水平规则：

• 1px的高度
• 2 像素透明间隙的重复图案，后跟 1 黑色像素
• 具有 100% 的宽度（给或取 3 个像素）
• 从第一个点到最后一个点，没有点被推到一起（黑点靠得太近）或被拉开（黑点之间的间距超过 2 个像素）
• 使用 CSS Background Radial-Gradient 的纯 CSS 布局

我现在被困在哪里

我还不能让它正常工作。 我忽略了什么，为什么以下不起作用？

hr{
background-image: radial-gradient(circle closest-side, Black 100%, Black 100%);
background-position: 0 0, 100% 100%, 0 0;
background-repeat: repeat-x;
background-size: 3px 1px;
}

在解决方案之前，寻找难以捉摸的圣杯 hr 仍未解决。 谢谢！

 html{ margin: 7em; background: #EEE} article { background: lightblue; height: 100px; padding: 2em} hr{ border-bottom: 1px dotted Black; border-top: none; margin: 1em 0; } hr{ background-image: radial-gradient(circle closest-side, Black 100%, Black 100%); background-position: 0 0, 100% 100%, 0 0; background-repeat: repeat-x; background-size: 3px 1px; }

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

Answer 1

以下代码有效。 虽然我不知道为什么以及如何精确。 因此，欢迎其他可以解释工作原理的答案。

经过多次试验，我发现第一个数字代表间隙大小，第二个数字代表background-size: 3px 1px;

hr{边框：无； 背景图像：径向渐变（圆形最近侧，黑色 100%，透明 100%）； 背景位置：0 50%； 背景重复：重复-x； 背景尺寸：3px 1px； /* 第一个 Nr 是 GAP 宽度，第二个 Nr 是 DOT 宽度 */ height: 1px; }

 html{ margin: 4em; background: #EEE} article { background: lightblue; height: 100px; padding: 2em} hr{ border: none; background-image: radial-gradient(circle closest-side, Black 100%, Transparent 100%); background-position: 0 50%; background-repeat: repeat-x; background-size: 3px 1px; /* First Nr is the GAP width, second Nr is the DOT width */ height: 1px; }

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