Css 奇怪的边界颜色问题

我正在创建一个顶级用户列表，我使用CSS3边框为排名编号创建一个白色边框。可在此处查看：

然而，似乎有一个黑色的边界后的边界，我觉得非常奇怪。它似乎是从背景色中溢出的

---

这是一个很小的问题，但我对为什么会发生这种情况很感兴趣。有人知道为什么吗？CSS非常简单，所以它不应该发生

看起来这是一个溢出问题：

您可以添加此

box-shadow: 0px 0px 2pt 2pt black;

在你的内心

#tf span h6 {

}

在

.css文件中

比如：

---

它将为圆形框生成黑色阴影，因此或多或少它会变得有吸引力，并消除框类问题。

为了防止在边框外泄漏，您需要使用

填充框声明
背景剪辑
属性。这将解决您的问题

代码更改：

#tf span h6 {
  background: #333333;
  border: 4px solid #F9F9F9;
  border-radius: 99px;
  color: white;
  font: 700 30px/80px arial, sans-serif;
  margin-left: -26px;
  padding: 5px 13px;

  /* The important part to remove the overflow/leak: */
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}

希望这能有所帮助。
很好的解决方案。在现场测试，它的作品（在铬）。这工作！这有什么帮助吗？还是只是“惯常的黑客”？仅供参考，无需使用“背景剪辑”的前缀版本。正常的方法在所有browsersTrue@MortenHjort中都可以使用，但为了安全起见，应该声明前缀属性以实现跨浏览器兼容性。我刚刚尝试过，但这只会给溢出带来阴影。如果将其插入溢出物内部。真奇怪。这也是Chrome的一个问题
#tf span h6 {
  background: #333333;
  border: 4px solid #F9F9F9;
  border-radius: 99px;
  color: white;
  font: 700 30px/80px arial, sans-serif;
  margin-left: -26px;
  padding: 5px 13px;

  /* The important part to remove the overflow/leak: */
  -webkit-background-clip: padding-box; 
  -moz-background-clip: padding; 
  background-clip: padding-box;
}