Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

即使像border-bottom: 2px dotted #000;那样简单的事情也无法奏效。我看到一些文章建议将左/右边框设置为透明，但看起来更糟糕的是它会切掉点的小角落。

但在Firefox中看起来很好。有没有办法让它在Chrome中看起来不错，或者我运气不好？

Answer 1

您绝对可以使用边框属性定位伪元素，并通过＆＃34; dot＆＃34;来偏移位置。宽度以隐藏呈现为双点的第一个和最后一个点。

＆＃13;

.text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.text::after {
  border-bottom: 2px dotted #000;
  content: '';
  position: absolute;
  bottom: 0; left: -2px; right: -2px;
}

＆＃13;

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

＆＃13;

Answer 2

如果您只想设置边框底部，为什么不尝试 text-decoration：下划线，

然后设置 text-decoration-style：dotted

请参阅此https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style

Chrome中的虚线

2 个答案: