css - 如何使线条看起来像 svg 中的 CSS border-bottom dotted 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/

一些解释:
线帽围绕路径的末端绘制 (illustrated here)。如果你有一个 round linecap，你将在一端有一个半圆，另一端有另一个。要只得到一个圆圈，两端之间不能有任何东西，这意味着 dasharray 中的宽度为 0 的实体段。