我试图给一个“卡片”元素一个看起来像是从页面上抬起的阴影。我正在使用 ::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,但我很确定我已经玩了足够多的东西来排除其他任何东西。
任何想法为什么会发生这种情况,如果它是特定于平台/浏览器的,和/或任何修复?谢谢你的帮助!