奇怪的边框颜色问题

Question

我正在创建一个用户名单,我使用CSS3边框为排名编号创建一个白色边框.它在这里可以看到:http://www.cphrecmedia.dk/musikdk/stage/channelfans.php

然而,边界之后似乎是一个黑色的边界,我觉得非常奇怪.它似乎是背景颜色的溢出物.

这是一个非常小的问题,但我对这个实际发生的原因很感兴趣.有谁知道为什么？CSS非常简单,所以不应该发生

Answer 1

要防止此边界外泄漏,您需要使用声明background-clip属性padding-box.这将解决您的问题.

守则变更:

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

希望这可以帮助.