我只是使用一个简单的CSS代码:
button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}
但是虚线边框没有显示在左侧:
我做错了什么?
修改
嗯,对于遇到此问题的每个人,都是关于您正在使用和缩放的导航器。我不知道为什么但是有些按钮可以看到四面的边框,有些按钮则不能。
答案 0 :(得分:4)
浏览器中有一些错误呈现一个像素宽的虚线边框,例如, Mozilla错误报告Dotted/dashed border-radiused corners are rendered as solid和Chromium错误报告Another Border-Bug: dotted line turns solid on the half way。您似乎在Chrome中触发了其中一个此类错误。在Win 7上的Chrome 28beta中测试你的jdsfiddle,我可以看到左边框是实心的,左下边框是实心的。 (这有点难以看到,但是如果你拍摄截图并将其缩放或将边框颜色设置为红色,它会变得更加明显。)
我担心找到一个可接受的解决方法可能很困难。在这种特殊情况下,如果你删除了圆角(你可能不想这样做)或将边框宽度设置为2px,那么这个bug似乎就会消失。
答案 1 :(得分:0)
点缀的1px边框很难看到。如果你放大 Cntrl + + 我想你会看到实际上有一个虚线边框。
或者,将1px更改为2px:border: 2px dotted #bebebe;
也会显示边框存在。
修改强>
移除border-radius: 4px;
,您将看到虚线边框。