CSS我不能转换边框样式吗？

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

由于元素有一个带有开始样式的边框，我想将其更改为inset，使其看起来更具前瞻性。但是，过渡似乎对“边框样式”属性不起作用，因此最终效果看起来不太好，因为边框样式的更改会立即发生，并且只会在稍后更改背景

有没有办法让这一切顺利进行？我觉得很奇怪，边框样式无法转换。如果有，有什么转机吗

代码如下：

#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来回答这个问题，你的问题可能写得很匆忙，但我认为你在第一个选择器中缺少了一个。此外，似乎从一开始到另一开始都在设置边框样式的动画，因此不会看到任何差异。它确实有效，我已经创建了一个演示，可以更改上的边框颜色供您查看。

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

您是对的，我已经更正了示例，我想我在编写要发布的最小版本时把事情弄糟了。代码确实有效，唯一的一点是边框样式的变化是突然的，您可以看到边框样式从插入到开始立即发生变化，而其他变化遵循过渡规则，正如您在这里所看到的：在我看来，最终的效果并不是很平滑。但是，我刚刚意识到，可能您无法转换边界样式，因为没有中间状态。所以我可能需要寻找其他的解决方案。无论如何谢谢你！