css - 如何使线条看起来像 svg 中的 CSS 边框底部点 1 px？

Question

我正在尝试创建一条看起来像的虚线

border-bottom: 1px dotted #ddd;

但是，我没有得到那个结果。它总是看起来有点大或颜色太褪色。

  stroke: #ddd;
  stroke-width: 1;
  stroke-dasharray: 1 ,2;
  stroke-linecap: round; 

有比 SVG Line 更好的方法吗？

Answer 1

您在 dasharray 中有问题。应该是stroke-dasharray: 0,2，不是1,2。见http://jsfiddle.net/cMHLt/1/

还有一个 10 倍放大版本：http: //jsfiddle.net/aXuLF/1/

一些解释：
线帽围绕路径的末端绘制（如图所示）。如果你有一个round线帽，你将在一端有一个半圆，另一个在另一端。最终只有一个圆圈，两端之间不能有任何东西，这意味着 dasharray 中有一个 0 宽度的实心段。