我知道这可能是一个骗局，但我愿意接受打击，因为我相信我已经研究了多种解决方案。
我已经尝试了很多方法来让这个盒子的阴影过渡工作，包括：
- 在
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);
}
这里可能发生了什么事情，导致这件事毫无进展？
这里有一个链接到我的网站，在上下文中体验。这是页面右上角的标题菜单。
尝试：
.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;
}
使用转换：all；而不是框阴影，应该修复您的问题