边界颜色过渡css3错误

Question

我试图在我的网站上做一个border-color属性的过渡，但是我有一个小错误，我不知道他来自哪里。

当我的鼠标放在按钮/链接上时，边框变为蓝色，然后出现过渡。我在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;
}

Answer 1

更新小提琴

明确声明链接正常状态下的透明边框:

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

Answer 2

您有一个没有显式颜色的零宽度边框，在悬停时变为灰色1像素边框，并且您正在尝试仅过渡border-color。这并没有真正起作用-发生的是宽度立即改变为1像素，然后你有一个蓝色的边框改变为灰色的边框。你改变了一件事，但却完全转变了另一件事。

边框以蓝色开始的原因是因为您没有为初始状态指定边框颜色，所以它采用的文本颜色也是蓝色。这是设计使然，不是任何浏览器的bug。我不知道你想要过渡的边框是什么(只有宽度，只有颜色，还是两者都有?)，所以很难提出解决方案。