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

Question

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

由于该元素有一个带有初始样式的边框，我想将其更改为 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

Answer 1

Your question may have been hastily written, but I think you're missing an _ in the first selector. Also, it seems that you're animating the border-style from outset to outset, so you won't see any differences. It does indeed work, I've created a demo that changes the border-color on jsfiddle for you to take a look at.

Answer 2

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