设置border-radius 50%的div的box-shadow在Firefox可见，Chrome/Edge不可见求助

嘿，这个问题我之前也碰到过好几次——Firefox对某些CSS细节的处理确实和Chrome、Edge这类Chromium系浏览器有细微差异，结合你提供的代码片段，给你几个具体的排查和解决方向：

1. 排查Firefox默认按钮样式干扰 #

Firefox会给原生按钮元素（包括带btn类的自定义按钮）添加默认的box-shadow或outline，有时候会被误认为是你自定义的阴影。你可以先强制重置这些默认样式，试试在你的.btn类里添加：

.btn {
  box-shadow: none !important;
  outline: none; /* 排除outline被误认成阴影的可能 */
}

如果是旧版Firefox，也可以加上-moz-box-shadow: none !important;（不过现在大部分新版Firefox已经不需要前缀了）。

2. 检查data-balloon工具库的兼容性 #

你用到了data-balloon属性的工具提示组件，有些这类第三方库在Firefox中会给目标元素额外注入阴影样式来模拟提示框的投影效果。你可以暂时移除data-balloon相关属性，看看box-shadow是否消失，以此确认是不是这个工具库的问题。如果是的话，可以去调整该库的Firefox适配样式，或者手动覆盖它的阴影规则。

3. 修正CSS阴影的写法细节 #

有时候你写的box-shadow值在Chromium系浏览器中会被解析为“无阴影”，但Firefox的解析逻辑略有不同。比如如果你原本写的是：

.bg-color-yellow {
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

可以直接换成更明确的写法：

.bg-color-yellow {
  box-shadow: none;
}

这种写法所有浏览器的解析逻辑都是一致的，不会出现差异。

4. 排查堆叠上下文的影响 #

Firefox对CSS堆叠上下文的处理和Chromium系有细微差别，比如父元素的overflow、position属性可能导致子元素的阴影在Firefox中被显示出来，而Chrome中被隐藏。你可以检查.myclass和.col-5的样式，看看有没有overflow: hidden这类属性，尝试调整它们的堆叠相关属性（比如添加position: relative）来统一浏览器表现。

5. 清除浏览器缓存 #

有时候Firefox会缓存旧的CSS文件，导致你修改后的样式没有生效。试试按Ctrl+Shift+R强制刷新页面，清除缓存后再观察效果。

如果以上方法都没解决问题，建议你补充完整的.btn、.bg-color-yellow类的CSS代码，以及说明你预期的阴影效果（比如完全隐藏，还是特定的阴影样式），这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者Mickaël Leger