html - Box-Shadow 不执行 Transition

Question

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

我已经尝试了很多方法来让这个盒子阴影过渡起作用，包括:

• 在 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以获得上下文体验。它是页面右上角的标题菜单。

Answer 1

尝试:

.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;
}