純 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>