边框颜色过渡css3错误

Question

我试图在我网站上的边框颜色属性上进行转换，但我有一点错误，我不知道他来自哪里。

当我的鼠标位于按钮/链接上时，边框变为蓝色，然后转换到来。 我在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

您有一个没有明确颜色的零宽度边框，在悬停时会更改为灰色的1像素边框，而您尝试仅转换border-color。这不起作用 - 会发生的是宽度立即变为1像素，然后您将蓝色边框更改为灰色边框。你正在改变一件事，但完全转变其他东西。

边框开始为蓝色的原因是因为您没有为初始状态指定边框颜色，因此它采用的文本颜色也是蓝色。那是by design，而不是任何浏览器中的错误。我无法确定你想要转换的边界究竟是什么（仅宽度，仅颜色，或两者兼而有之？），因此很难提出解决方案。

Answer 2

Updated fiddle.

在链接的正常状态下明确说明透明边框：

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