是否可以使用纯CSS3创建此阴影？

Question

我们的设计师喜欢这些花哨的阴影,但我想避免使用图像精灵.相反,我只想用css3创建它.虽然用css3复制像素完美,但有点棘手:

这是我能得到的最接近但是我对结果并不满意,因为我不希望.box的额外html包装器以及左边的淡入淡出效果看起来不正确:

小提琴:https://jsfiddle.net/valmar/k8ugjwb2/3/

我的代码尝试:

HTML

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

CSS

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

是否有任何css大师可以创建这个投影的像素完美复制品而不需要任何额外的标记<div class="box">content</div>？

Answer 1

好吧，像素完美是一项硬性要求。

但我可以告诉你一条路，而且离它很近。我使用的是伪元素，具有 2 个径向渐变和一个旋转。

您可以使用渐变、颜色和停止点的相对位置来对其进行微调。

#testback {
  position: absolute;
  top: 0px;
  width: 900px;
  height: 210px;
  background-color: rgb(238, 238, 238);
  z-index: 1;
}
#test {
  position: absolute;
  background: white;
  width: 94%;
  height: 50%;
  left: 3%;
  z-index: auto;
}
#test:after {
  content: "";
  position: absolute;
  width: 81%;
  height: 61px;
  bottom: -10px;
  left: 1%;
  transform: rotate(-4deg);
  z-index: -1; 
  background-image: radial-gradient(ellipse at center, rgb(82, 82, 82), rgba(255, 255, 255, 0) 60%),                         radial-gradient(ellipse at center, gray, rgba(255, 255, 255, 0) 70%);
  background-position: 14px 0px, center center;
}

<div id="testback">
<div id="test">
</div>
</div>