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

希望这有帮助。

Answer 2

看起来这是一个漏油事件：

https://bugzilla.mozilla.org/show_bug.cgi?id=24998

Answer 3

您可以添加此

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

在你的

里面

#tf span h6 {

}

.css file

中的

像：

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

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

它会为你的圆形框子产生黑色阴影，所以它或多或少会变得有吸引力并消除那种盒子的问题。

奇怪的边框颜色问题

3 个答案: