Странный вопрос о границе цвета

Question

Я создаю toplist пользователей, где я использую границу 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; 
} 

он будет генерировать черную тень на вашу округлую коробку, так более или менее он станет привлекательным и снимает эту коробку рода проблема.