奇怪的邊框顏色問題

我正在創建用戶的頂部列表，我使用CSS3邊框爲排名數字創建白色邊框。它在這裏可以看到：http://www.cphrecmedia.dk/musikdk/stage/channelfans.php 奇怪的邊框顏色問題

但是它似乎是一個黑色的邊界後邊界，我覺得很奇怪。它似乎是從背景色中溢出來的。

它是一個非常小的問題，但我對這個實際發生的原因很感興趣。有誰知道爲什麼？該CSS是非常非常簡單，所以它不應該發生

2014-02-21 Morten Hjort

爲了防止外部邊界泄漏，您需要聲明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; 
}

希望這有助於。

來源

2014-02-21 13:23:11 Nitesh

尼斯解決方案中的一個問題。在網站上測試並且可以正常運行（在Chrome中）。 –

謝謝@Paulie_D :) – Nitesh

工作！有沒有一個很好的解釋，爲什麼這有助於？還是僅僅是「平常的黑客」？僅供參考，theres不需要使用「背景剪輯」的前綴版本。正常的在所有瀏覽器中工作正常 –

看起來它是一個溢出問題：

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

來源

2014-02-21 13:07:12 timhc22

您可以添加此

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

裏面你

#tf span h6 { 

}

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

它會產生黑色的影子你圓盒，所以或多或少會變得有吸引力，並刪除盒子樣的問題。

來源

2014-02-21 13:18:50

我只是試過了，但這只是給漏影之外的一個影子。如果插入泄漏的內部。它真的很奇怪。它也是Chrome –

奇怪的邊框顏色問題

回答

相關問題