css - CSS - 虚线边框错误？

Question

我只是为此使用了一个简单的 CSS 代码：

button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}

但是虚线边框没有出现在左侧：

我究竟做错了什么？

编辑：

好吧，对于遇到此问题的每个人，这与您正在使用的导航器和缩放有关。我不知道为什么，但有些按钮你可以看到四面八方的边框，有些按钮你看不到。

Answer 1

浏览器在渲染一个像素宽的虚线边框时存在错误，请参见例如 Mozilla 错误报告Dotted/dashed border-radiused corners are rendering as solid和 Chromium 错误报告Another Border-Bug: dotted line become solid on the half way。您似乎在 Chrome 中触发了此类错误之一。在 Win 7 上的 Chrome 28bet​​a 中测试你的 jdsfiddle，我可以看到左边框是实心的，左半边是实心的底部边框。（这有点难看，但如果你截取屏幕截图并缩放它或将边框颜色设置为红色，它会变得更加明显。）

恐怕很难找到可接受的解决方法。在这种特殊情况下，如果您删除圆角（您可能不想这样做）或将边框宽度设置为 2px，则该错误似乎消失了。

Answer 2

1px 的虚线边框很难看到。如果你放大Cntrl++我想你会看到实际上有一个虚线边框。

或者，将 1px 更改为 2px :border: 2px dotted #bebebe;也表明存在边框。

编辑： 删除border-radius: 4px;，你会看到虚线边框。