如何使用 CSS 使图像在 3 个侧面（顶部、右侧和左侧）有一个盒子阴影，并在底部有一个淡入淡出的白色？答案

【问题标题】：How can I make an image have a box-shadow on 3 sides (top, right, and left) and also have a fade to white on the bottom using CSS?如何使用 CSS 使图像在 3 个侧面（顶部、右侧和左侧）有一个盒子阴影，并在底部有一个淡入淡出的白色？
【发布时间】：2020-02-19 18:41:08
【问题描述】：

我正在尝试使用 CSS linear-gradient 和 box-shadow 使图像在 3 个侧面（顶部、右侧和左侧）上都有一个 box-shadow，同时在底部也有一个“淡入淡出”图像的边缘。我不想要 CSS 中的图像 url，我想在 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>

【问题讨论】：

而不是放下阴影，你可以抬起它box-shadow: 0 -20px 20px rgba(0,0,0,0.19), 0 -6px 6px rgba(0,0,0,0.23);
如果我抬起盒子阴影，它会使顶部边缘盒子阴影比右侧/左侧更暗更厚。
然后也为那个使用一个伪元素。使用绝对位置来设置它们而不是负边距；）
嗯，我觉得我没听懂，你能用密码笔给我看看吗？
这是个想法codepen.io/gc-nomade/pen/eYNdZBM ;)

标签： css linear-gradients box-shadow

【解决方案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>

【讨论】：