CSS 我不能过渡边框样式

Question

我有一个菜单，其中元素在悬停时有一个简单的动画，改变背景颜色和文本颜色。

由于该元素具有与开始样式的边框，因此我想将其更改为插图以使其看起来向前。但是，过渡似乎不适用于边框样式属性，因此最终效果看起来不是很好，因为边框样式的更改会立即发生，并且稍后背景才会更改。

任何想法如何使这项工作？我觉得很奇怪，边框样式无法过渡。如果是这样，有什么转机吗？

代码如下：

#main_menu a, #main_menu li { 
  -webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
 } /*Hover animation */
#main_menu li:hover { background: #4488CC;  border-style: inset; }
#main_menu li {
        /*GRAPHICS*/
    list-style: none;
    border: 3px outset #496181;
    margin: 10px;
    background: #333;

PS：我不想为此使用jquery

Answer 1

你的问题可能是仓促写的，但我认为你在第一个选择器中缺少一个_。此外，您似乎正在将border-style从outset动画化到outset，因此您不会看到任何差异。它确实有效，我创建了一个演示，可以更改 jsfiddle 上的border-color供您查看。

Answer 2

另一种解决方案是将边框创建为按钮图像并在div 中拉伸它，然后只使用框阴影。 这样，用户仍将通过阴影中的过渡看到平滑的按钮移动。