我有一个小 CSS 问题，我不知道为什么:
如您所见，Edge 和 Chrome 是“正常的”，但在 Mozilla 上可以看到阴影，我不知道为什么...我检查了 canaiuse ( https://caniuse.com/#feat=css-boxshadow )，但没有发现兼容性问题，< strong>有人知道为什么吗？
这是这部分的 html/css:
HTML
我的文档类型:<!DOCTYPE html>
<div class="myclass col-5">
<a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-yellow"><i class="fas fa-camera-retro" aria-hidden="true"></i></a>
<a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-yellow-light"><i class="fas fa-images" aria-hidden="true"></i></a>
<a href="#" data-balloon="..." data-balloon-pos="down" class="btn bg-color-grey"><i class="fas fa-cogs" aria-hidden="true"></i></a>
</div>
CSS - SASS(这是我编译前的 .scss)
.myclass {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-right: 0;
@include position(absolute, 0, 0, null, null);
a.btn {
height: 30px;
width: 30px;
border-radius: 50%;
text-align: center;
padding: 0;
position: relative;
transition: all .2s ease-out;
box-shadow: 0 0 0 0 $grey-dark;
z-index: 50;
&:hover {
transform: translate(2px, -2px);
box-shadow: -2px 2px 0px 0px $grey-dark;
}
.fa-cogs,
.fa-camera-retro,
.fa-images {
color: $white;
}
svg {
display: block;
margin: 0 auto;
@include vertical-align();
}
}
}
我试图删除 data-balloon我的链接的一部分只是为了查看 balloon.css我的问题，但没有任何改变
PS:如果你需要我编译后的 CSS 告诉我，但你应该看看我用下面的代码做了什么
编辑:这是一个片段，如果您在 MOZILLA 上打开它，您可以看到问题
div {
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-right: 0;
}
div a {
display: inline-block;
height: 30px;
width: 30px;
border-radius: 50%;
text-align: center;
padding: 0;
position: relative;
transition: all .2s ease-out;
box-shadow: 0 0 0 0 black;
z-index: 50;
background: orange;
}
div a:hover {
transform: translate(2px, -2px);
box-shadow: -2px 2px 0px 0px black;
}<div>
<a></a>
<a></a>
<a></a>
</div>最佳答案
我测试了你的代码并且它工作正常。我在这里没有看到任何 box-shadow 问题...但是，如果存在问题，您可以在正常状态下将 box-shadow 颜色设置为 transparent 并将其更改为:悬停
div {
height: 30px;
width: 30px;
border-radius: 50%;
text-align: center;
padding: 0;
position: relative;
transition: all .2s ease-out;
box-shadow: 0 0 0 0 transparent;
z-index: 50;
background: orange;
}
div:hover {
transform: translate(2px, -2px);
box-shadow: -2px 2px 0px 0px grey;
}<div></div>关于css - 在 Mozilla 而不是 Chrome/Edge 上可见边框半径为 50% 的 div 上的框阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49487674/