Box-Shadow 未执行过渡

Question

我知道这可能是个骗局，但我愿意接受打击，因为我有信心研究了多种解决方案。

我已经尝试了很多方法来让这个 box-shadow 过渡生效，包括：

在 box-shadow 声明中的十六进制、rgb 和 rgba 颜色之间切换。
使用更具体的选择器。
更改 transition 属性以在声明末尾包含 ease-in-out。
我清除了 CSS 文件中可能影响该元素的所有 transition 属性。
一直以来，三次检查我的拼写错误。

检查员说我的样式没有被覆盖。这是我的代码：

.site-header .genesis-nav-menu .menu-item a {
  -webkit-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -moz-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -o-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -webkit-transition: box-shadow 3s;
  -moz-transition: box-shadow 3s;
  -o-transition: box-shadow 3s;
  transition: box-shadow 3s;
}

.site-header .genesis-nav-menu .menu-item a:hover{
  -webkit-box-shadow: 3px 3px 14px rgb(0,0,0);
  -moz-box-shadow: 3px 3px 14px rgb(0,0,0);
  -o-box-shadow: 3px 3px 14px rgb(0,0,0);
  box-shadow: 3px 3px 14px rgb(0,0,0);
}

这里发生了什么导致它什么都不做？

Here is a link to my site 的上下文体验。它是页面右上角的 header 菜单。

Answer 1

使用过渡：全部；而不是 box-shadow，应该可以解决你的问题

Answer 2

尝试：

.site-header .genesis-nav-menu .menu-item a {
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0), 3px 3px 14px rgb(0,0,0) inset;
  transition: box-shadow 3s;
}

.site-header .genesis-nav-menu .menu-item a:hover {
  box-shadow: 3px 3px 14px rgb(0,0,0), 0 0 0 rgba(0,0,0, 0) inset;
}

Box-Shadow 未执行过渡

Box-Shadow not carrying out Transition

html

css

css-transitions

box-shadow