Question

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

HTML

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

CSS

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

我该如何解决呢。

感谢。

https://jsfiddle.net/hL3e16mh/＆lt; - mozilla

Answer 1

box-shadow不是您问题的原因，而transform: rotate(10deg);在Mozilla上无法正常呈现。所以你可以选择这样的替代解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以查看Fiddle.希望它能为您提供帮助。

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

1 个答案: