css - 奇怪的边框颜色问题

Question

我正在创建一个用户排行榜，我在其中使用 CSS3 边框为排名数字创建一个白色边框。可在此处查看:http://www.cphrecmedia.dk/musikdk/stage/channelfans.php

不过边框后面好像有个黑边，我觉得很奇怪。它似乎是从背景色中溢出的。

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

Answer 1

为了防止这种泄漏到边界外，您需要使用 padding-box 声明一个 background-clip 属性。这将解决您的问题。

代码更改:

#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;
}

希望这对您有所帮助。