是否可以使用纯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>

Answer 2

试试这个Fiddle.

    POST /was/interface/member/v1/register.do HTTP/1.1
    Host: localhost:8080
    Cache-Control: no-cache

    ----WebKitFormBoundaryE19zNvXGzXaLvS5C
    Content-Disposition: form-data; name="registerRequest"

    { -- some of my json format content}
    ----WebKitFormBoundaryE19zNvXGzXaLvS5C
    Content-Disposition: form-data; name="attachment"; filename="IMG_0089.JPG"
    Content-Type: image/jpeg


    ----WebKitFormBoundaryE19zNvXGzXaLvS5C