Firefox中的视觉工件,可能是由于css-transform或:: after元素？

Question

我试图给一个'卡'元素一个阴影,它看起来像是从页面上抬起来的.我正在使用:: after伪元素,css变换和盒子阴影.

我使用的是Mac OSX,Chrome(最新版本)和Firefox 5.结果是

如您所见,firefox渲染中有一个奇怪的类似边框的工件.这种颜色似乎与身体背景颜色有关 - 正如你在第二个firefox示例中看到的那样.

为此,我有以下代码:

HTML:

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
</div>

CSS:

.card{
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  height: 375px;
  margin-bottom: 20px;
}

.card_container::after{
  content: "";
  width: 210px;
  height: 10px;
  -webkit-transform: rotate(2deg); 
  -moz-transform:    rotate(2deg);
  box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  position:absolute;
  bottom: 20px;
  right: 8px;
  z-index: -1;
}

还有更多的CSS,但我很确定我玩过足够的东西来统治其他任何东西.

任何想法为什么会这样,如果它是平台/浏览器特定的,和/或任何修复？谢谢你的帮助!

Answer 1

:after是一个棘手的选择器：您将 HTML 元素添加到文档中，但无法自由操纵其位置。我建议像这样更改 HTML：

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
  <div class="shadow"></div>
</div>

您必须向正在使用的每个卡片元素添加一些“shadow”div，这可能需要一些时间。

现在介绍 CSS：

.card {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  margin-bottom: 20px;
  height:100px; /* just for show, can be set to auto */
}

.card_container {
  width:210px;
  overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}

.shadow {
  width: 93%;
  height: 10px;
  /* rotation */
  transform:rotate(2deg);
  -moz-transform:rotate(2deg); /* Firefox */
  -webkit-transform:rotate(2deg); /* Safari and Chrome */
  /* shadow */
  box-shadow: 3px 3px 3px #4a4a4a;
  -moz-box-shadow: 3px 3px 3px #4a4a4a;
  -webkit-box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  border: 1px solid #4a4a4a;
  position: relative;
  bottom: 33px;
  left: 5px;
  z-index: -1;
}

该解决方案不是很灵活：如果更改卡片的宽度，则需要调整阴影元素（例如，阴影越宽，旋转越少）。