5

我试图给一个“卡片”元素一个看起来像是从页面上抬起的阴影。我正在使用 ::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，但我很确定我已经玩了足够多的东西来排除其他任何东西。

任何想法为什么会发生这种情况，如果它是特定于平台/浏览器的，和/或任何修复？谢谢你的帮助！

4

1 回答 1

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

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

于 2011-08-26T16:00:53.450 回答