Chrome 中的虚线

Question

出于某种原因，当使用虚线边框样式制作线条时，Chrome 将两端呈现为双点，这看起来很糟糕，尤其是在短线上：

.text {
  border-bottom: 2px dotted #000;
}

<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

即使像 border-bottom: 2px dotted #000; 这样简单的东西也行不通。我看到一些文章建议将 left/right 边框设置为透明，但这看起来更糟糕，因为它会切断圆点的小角。

不过在 Firefox 中看起来不错。有什么方法可以让它在 Chrome 中看起来一样好，还是我运气不好？

Answer 1

如果你只想设置边框底部，为什么不试试 text-decoration:underline,

然后设置 text-decoration-style:dotted

看到这个https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style

Answer 2

您完全可以定位具有边框属性的伪元素，并将位置偏移 "dot" 宽度以隐藏呈现为双点的第一个和最后一个点。

.text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.text::after {
  border-bottom: 2px dotted #000;
  content: '';
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
}

<span class="text">Hi</span><br/>
<span class="text">lll</span><br/>
<span class="text">22</span><br/>

Chrome 中的虚线

Dotted lines in Chrome

css

border

dotted-line