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

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