如何使用CSS在设备下再现阴影

Question

是否可以使用CSS并在附加图像的设备下复制阴影？

以下CSS和其他变体无法正常工作：

filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);

问题是将阴影集中在设备下方并将其弄平。上面的CSS不能使阴影看起来像投射在地面上。

Codepen：https://codepen.io/Crashalot/pen/MWYzoJV

Answer 1

使用box-shadow，类似的解决方案可能是：

box-shadow: 0px 10px 10px -5px #000;

使用您的代码：

#phone {
  margin: auto;
  width: 124px;
  height: 268px;
  border: 1px solid red;
  background: green;
  box-shadow: 0px 10px 10px -5px #000;
}

<div id="phone"></div>

Answer 2

伪元素更适合完成此操作，请参见以下示例：

.object {
  margin: 20px;
  width: 70px;
  height: 140px;
  position: relative;
  border-style: solid;
  background: #E6E6FA;
}
.object:before {
  content:"";
  z-index: -1;
  position: absolute;
  bottom: -50%;
  width: inherit;
  height: inherit;
  border-radius: 40%;
  background: rgba(0,0,0,.55);  
  transform:  scaleX(1.3) scaleY(0.12);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<div class="object"></div>