Question

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

由于元素有一个带有开始样式的边框，我想将其更改为插图以使其看起来更好。然而，转换似乎不适用于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，以便您查看。

Answer 2

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

CSS我不能过渡边框风格吗？

2 个答案: