Webkit 渲染框阴影答案

【问题标题】：Webkit rendering box-shadowsWebkit 渲染框阴影
【发布时间】：2013-09-11 04:14:12
【问题描述】：

我无法弄清楚这些是如何发生的：

http://d.pr/i/PHJF

有没有人体验过这些类型的盒子阴影被渲染？当我使用 JavaScript/jQuery 将一些元素附加到 DOM 时似乎会发生这种情况。

任何见解都会很棒！

【问题讨论】：

请提供一些代码或一些可以不用猜测就能回答的东西。如果您想要纸张效果，那就太好了。它看起来很不错:)
@Pinocchio 如果您看这里：tushiesandtantrums.com/products/practical-cotton-car - 单击“立即购买”，将州更改为田纳西州，您会在右侧的票证上看到它。显示的图像上有一个带有 css 的模糊滤镜。就像它不承认 z-index 一样。

标签： javascript jquery css webkit

【解决方案1】：

试试这个

<div class="box effect2">
box
</div>

css

.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

【讨论】：

【解决方案2】：

修好了！对于遇到此类问题的任何人：

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

专门使用背面可见性和透视来解决我的问题。

【讨论】：