如何使用CSS使图像的三个侧面（顶部，右侧和左侧）具有盒形阴影，并且在底部具有淡入白色的阴影？

Question

我正在尝试使用CSS线性渐变和矩形阴影使图像的三个侧面（顶部，右侧和左侧）具有矩形阴影，同时在底部边缘也具有“淡入白色”图片。我不想在CSS中使用图片网址，而是要在html中使用img标签。到目前为止，这是我所拥有的：https://codepen.io/adelelanders/pen/rNVMxZw但是底部边缘仍显示出框阴影（暗线）。我希望底部边缘逐渐变淡为白色。

img {
  max-width: 100%;
}

.image-container {
  max-width: 100%;
  width: 600px;
}

.white-fade::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: '';
}

.box-shadow {
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

<div class="image-container white-fade">
  <img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>

Answer 1

考虑遮罩而不是渐变

img {
  max-width: 100%;
}

.image-container {
  max-width: 100%;
  width: 600px;
  padding:20px; /* Some padding for the shadow */
  -webkit-mask: 
    linear-gradient(#fff,#fff)        top/100% calc(100% - 149px) no-repeat,
    linear-gradient(#fff,transparent) bottom/100% 150px           no-repeat;
  mask: 
    linear-gradient(#fff,#fff)        top/100% calc(100% - 149px) no-repeat,
    linear-gradient(#fff,transparent) bottom/100% 150px           no-repeat;
}

.box-shadow {
  border-radius: 5px;
  display:block;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 1), 0 6px 6px rgba(0, 0, 0, 1);
}

<div class="image-container white-fade">
  <img class="box-shadow" src="https://cdn.pixabay.com/photo/2019/03/18/06/46/cyber-4062449__340.jpg" />
</div>