Firefox中的圆角：边框和背景之间的空间

Question

我有一个div，我正在应用圆角。

这是我的demo fiddle。

<div>&nbsp;</div>

 

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
    background-color: #4c66a1;
    border: 2px solid #4c66a1;
}

我还有一个应用于此div的边框和背景颜色。这个问题出现在Firefox中。边框和div的背景颜色之间有少量的空白（见下图）。这是非常小的，但人们已经注意到了它。它看起来像角落里的灯光效果。

这是Firefox中圆角的已知问题吗？ IE，Chrome和Opera都很好。

仅供参考/为了说明问题，我已经使边框和背景颜色相同，即使它是多余的。它使空白更突出。

 Firefox      Chrome/IE/Opera

Answer 1

有趣的是，如果我们将其改为点缀，那么白色就会消失：

div {
    margin: 20px;
    width: 250px;
    height: 250px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    border-radius: 30px;
    background-color: #4c66a1;
    border: 2px dotted #4c66a1;
}

http://jsfiddle.net/5yAkZ/23/

编辑之前的css无效

Answer 2

请参阅Firefox 11及更高版本中修复的https://bugzilla.mozilla.org/show_bug.cgi?id=704399。

Answer 3

检查这是你想要的     JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div>

 

#ex1{
    border-radius: 50px;
    height: 200px;
    width: 200px;
}
.exampleRound {
    background: none repeat scroll 0 0 #4c66a1;
    border: 5px solid pink;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 20px 40px;
    margin:20px
}