虚线边框没有显示在Firefox中

Question

我的半径div为5px虚线边框，但Firefox中的边框无法正确显示。 它在IE和Chrome中表现得很好。

Demo

 div{
        height:100px;
        width: 100px;
        background-color: #ccc;
        border-radius: 50%;
        border:5px dashed #333;
    }

Answer 1

您的边框正在使用firefox，请参阅DEMO您可以通过删除半径进行检查。当您尝试使用虚线边框进行循环时，FireFox会出现错误。

这是known bug。您的选择是：

• 如果这仅仅是为了圆圈，请使用<canvas>绘制，例如正如所示here
• 使用SVG（可能是内联的），它支持stroke paths
的各种方式
• 只需制作图像PNG

Answer 2

这是一个错误，以下是Firefox中所有其他出色的边界半径缺陷。 https://bugzilla.mozilla.org/show_bug.cgi?id=431176

旧帖子

Why does border: 5px dashed not come out as dashed in Firefox?

你可以用图像

来实现它

http://www.guyroutledge.co.uk/blog/better-dotted-borders-with-border-image/