邊框顏色轉換css3錯誤

我正在嘗試在我的網站上的邊界顏色屬性上進行轉換，但是我有一個小錯誤，我不知道他來自哪裏。邊框顏色轉換css3錯誤

當我的鼠標在按鈕/鏈接上時，邊框變爲藍色，然後過渡到來。我在firefox/chrome/opera上試過這段代碼，這個問題出現在所有這些問題上，所以這可能是我的錯誤。

你可以看到有這個問題：提前http://jsfiddle.net/u3Ahk/15/

.bouton a { 
    transition: background-color 1s, border-color 1s; 
    padding: 5px 7px 8px 7px; 
    text-decoration: none; 
}

謝謝！

來源

2013-05-27 Off

Updated fiddle.

明確規定的透明邊框中的鏈接的正常狀態：

.bouton a { 
    transition: background-color 1s, border-color 1s; 
    padding: 5px 7px 8px 7px; 
    text-decoration: none; 
    border: 1px solid transparent; /* this */ 
}

來源

2013-05-27 10:27:19

您有一個沒有明確顏色的零寬度邊框，在懸停時變爲灰色1像素邊框，並且您只嘗試轉換border-color。這實際上並不奏效 - 發生的情況是寬度立即變爲1像素，然後您將藍色邊框變爲灰色邊框。你正在改變一件事，但完全轉換別的東西。

邊框以藍色開始的原因是因爲您沒有爲初始狀態指定邊框顏色，所以它的文字顏色也是藍色。這是by design，而不是任何瀏覽器中的錯誤。我無法分辨出您想要過渡的邊界（僅限寬度，僅限於顏色還是兩者），因此很難提出解決方案。

來源

2013-05-27 10:26:33 BoltClock

邊框顏色轉換css3錯誤

回答

相關問題