Html mozilla旋转div和他的阴影之间的空间

我的div和他的影子之间有一个空间，只有在mozilla上

HTML

我怎样才能修好它

谢谢

---

box shadow

不是问题的原因，而是变换：旋转（10度）未在Mozilla上正确渲染。因此，您可以使用以下替代解决方案：

.box{
高度：200px；
宽度：200px；
变换：旋转（10度）；
位置：绝对位置；
}
.box1{
背景色：#4444；
z指数：2；
顶部：50px；
左：50px；
边框：10px实心#000000；
盒影：0.4px1pRGBA（0,0,0,1）；
}
.box2{
背景颜色：深红色；
z指数：1；
顶部：100px；
左：100px；
}

---

框阴影

不是问题的原因，而是变换：旋转（10度）未在Mozilla上正确渲染。因此，您可以使用以下替代解决方案：

.box{
高度：200px；
宽度：200px；
变换：旋转（10度）；
位置：绝对位置；
}
.box1{
背景色：#4444；
z指数：2；
顶部：50px；
左：50px；
边框：10px实心#000000；
盒影：0.4px1pRGBA（0,0,0,1）；
}
.box2{
背景颜色：深红色；
z指数：1；
顶部：100px；
左：100px；
}

感谢您的回答，10px阴影显示了问题所在。我找到了一个带过滤器的解决方案：drop shadow（0px 0px 3px rgba（0,0,0,1））；谢谢你的回答，10px的阴影显示了这个问题。我找到了一个带过滤器的解决方案：drop shadow（0px 0px 3px rgba（0,0,0,1））；

<div class="box box1"></div>
<div class="box box2"></div>

.box {
height: 200px;
width: 200px;
transform: rotate(10deg);
position: absolute;
}
.box1 {
background-color: #444444;
z-index: 2;
top: 50px;
left: 50px;
box-shadow: 0px 0px 3px 10px rgba(0,0,0,1);
}
.box2 {
background-color: crimson;
z-index: 1;
top: 100px;
left: 100px;
}