CSS 不能过渡 border-style 吗？

Question

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

由于该元素有一个带有 outset 样式的边框，我想将其更改为 inset 以使其看起来向前。然而，过渡似乎不适用于 border-style 属性，因此最终效果看起来不太好，因为 border 样式的更改会立即发生，然后背景才会更改。

关于如何使这项工作有任何想法吗？我觉得border-style不能过渡很奇怪。如果是这样，任何转机？

代码如下:

#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给你看看。