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

【问题标题】：Rounded corners in Firefox: space between border and backgroundFirefox 中的圆角：边框和背景之间的空间
【发布时间】：2012-03-07 11:51:00
【问题描述】：

我有一个要应用圆角的 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 都可以。

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

 火狐浏览器/IE/Opera

【问题讨论】：

当我将颜色更改为红色时它没有重现
@FosterZ：Red 仍然为我做这件事。只是不太明显。将半径曲柄增加到 50，你会看到它，差不多。编辑：实际上，我在 15 岁时仍然可以看到它，老鹰注视着我；）
是的，这就是为什么我在示例中使用相似的颜色来更好地说明问题。明亮的颜色会让你的视线远离它，而且问题不那么明显。如果您真的想看到它发生，请尝试使用边界半径创建一个圆圈。空格将包围整个 div。
修复了！只需使用颜色 #FFF ... 是的，但实际上，必须是 Firefox 渲染的东西（错误或糟糕的设计）
@musefan 我不能使用白色，因为我想要边框和背景色。

标签： html firefox css

【解决方案1】：

有趣的是，如果我们把它改成dotted，白色就消失了：

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/

EDIT以前有无效的css

【讨论】：

那是无效的 css。您必须指定样式，否则边框甚至不会显示。
你是对的，我所拥有的是无效的。但是，如果我们将其更改为 dotted，问题似乎就会消失（至少在我这边） - 就像一个带有圆形实心边框的 bug。
哇，抓得真好！从这里我做了一些实验，发现如果你使用double 风格......问题就解决了！因为我的边框只有2px，所以你实际上无法检测到双边框，它只在 > 3px 处明显，它分成 2 个不同的边框。非常感谢您的帮助！这应该在某处的错误报告中提交......

【解决方案2】：

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

【讨论】：

【解决方案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
}

【讨论】：

将那些明亮的颜色换成柔和的色调，问题仍然存在。