Firefox中的border-radius错误

Question

我在Firefox中使用border-radius函数时遇到了一些问题。当我应用它时，会在项目周围创建一些空间或边框。请问这是Firefox的一个bug还是可以解决的问题？以下是出现问题的链接： JsFiddle。

border-radius:50%;

线路使得这一点成为事实，我很确定。

- radonyzsolt

---

我觉得看起来没问题，似乎我们需要一些快照来证明你这边出了什么问题。 - King King

我认为这是一个bug，也许这个链接会有帮助：https://bugzilla.mozilla.org/show_bug.cgi?id=466572 -- 请注意，不仅是border-radius会产生这种副作用 - 没有box-shadow时看起来很好。 - xec

@KingKing 每个浏览器都有其优缺点，例如在Windows上，Firefox比Chrome更擅长渲染字体。没有一个浏览器是万能的，但Firefox是唯一真正开放的软件，拥有多种选择总是件好事。您的评论看起来更像是抱怨而不是建设性反馈。 - xec

这里有另一个修复方案 http://jsfiddle.net/JMLNd/7/。虽然如果你想要在圆心添加一些文本，我们必须将文本添加到 :before 元素中，否则我们必须将 :before 元素发送到后面，但这样做会在圆周围创建一个小的光边框（由主圆的阴影混合）。 - King King

上次我看到-moz-border-radius时，我想我还在玩拨浪鼓。 - Brewal

Answer 1

似乎这是Firefox在使用border-radius渲染阴影时的问题。您可以尝试这个简单的技巧：

演示

基本上，您需要在父级li上应用灰色阴影，使其变得更加细致，并稍微移动a.ch-item子元素，以便它跨越间隙。

.ch-grid > li {
    box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 198px;
    height: 198px;
}
.ch-item {
    position: relative; 
    top: -1px;
    left: -1px;
}

当然，这只是个想法。您可能还想在

元素本身上应用悬停效果，并将其向下和向右移动1像素以获得更好的结果。

编辑：一个更好的结果。

- Brewal