是否可以仅使用普通CSS3创建此阴影？

我们的设计师非常喜欢这种奇特的阴影，但我想避免使用图像精灵。相反，我只想用css3创建它。不过，要用css3复制像素级的完美效果有点棘手：

这是我能得到的最接近的结果，但我对结果不是很满意，因为我不想为.box添加额外的html包装，而且左侧的淡入效果看起来不正确：

小提琴：

我的代码尝试：

HTML

<div class="boxwrap">
   <div class="box">content</div>
</div>

除了

内容

，是否有任何css大师可以创建此阴影的像素完美复制品而无需任何额外标记？

试试这个

---

好吧，像素完美是一个硬要求

但是我可以给你指一条路，让它离你很近。我使用的是一个伪元素，有两个径向梯度和一个旋转

您可以使用渐变、颜色和挡块的相对位置进行微调

#回测{
位置：绝对位置；
顶部：0px；
宽度：900px；
高度：210px；
背景色：rgb（238238238）；
z指数：1；
}
#试验{
位置：绝对位置；
背景：白色；
宽度：94%；
身高：50%；
左：3%；
z指数：自动；
}
#测试：之后{
内容：“；
位置：绝对位置；
宽度：81%；
高度：61px；
底部：-10px；
左：1%；
变换：旋转（-4deg）；
z指数：-1；
背景图像：径向梯度（中心椭圆，rgb（82，82，82），rgba（255，255，255，0）60%），径向梯度（中心椭圆，灰色，rgba（255，255，255，0）70%）；
背景位置：14px 0px，居中；
}

你能建议输出需要什么吗。@stanze你说的输出是什么意思？你可以在实际的盒子下面有一个模糊的、透明的、旋转的“盒子”，它有一个线性渐变，以在左边产生淡出效果。它不会简化html，但至少应该看起来更像设计。看起来更糟，因为阴影不可旋转。我看不到阴影demo@Timo它在Chrome和FF中对我有效。也许你在用Safari？哦，是的。为什么它在Safari中不起作用？镀铬看起来不错

body{
    background: #edefed;
}

.boxwrap{
    width: 350px;
    height: 365px;
    position:relative;
}

.box{
    width: 350px;
    height: 350px;
    background: #fff;
}

.box:after{
    width: 350px;
    height: 50px;
    bottom: 26px;
    display: block;
    position:absolute;
    content: " ";
    z-index: -1;
    -webkit-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    -moz-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.box:after{
    width: 350px;
    height: 50px;
    bottom: 26px;
    display: block;
    position:absolute;
    content: " ";
    z-index: -1;
    box-shadow: 0px 19px 8px -5px rgba(0,0,0,0.56);
}