firefox - 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>

您必须向每个使用的卡片元素添加一些“阴影”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;
}

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