CSS3边框颜色过渡bug

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

非常感谢您的提前帮助！

- Off

Answer 1

已更新的范例。

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

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

- Bram Vanroy

Answer 2

你的边框宽度为零且没有明确的颜色，当鼠标悬停时变为灰色1像素边框，并且你想要仅过渡border-color。这并不起作用——发生的是宽度立即变为1像素，然后你有一个蓝色边框变成灰色边框。你正在改变一件事情，但完全过渡了另一件事情。

边框开始为蓝色的原因是因为你没有为初始状态指定边框颜色，所以它采用文本颜色，也是蓝色。这是设计如此，而不是任何浏览器中的错误。我无法确定你想要过渡边框的哪个部分（仅宽度、仅颜色还是两者都需要？），因此很难提出解决方案。

- BoltClock