如何在列表的底部项目上放置固定阴影？答案

【问题标题】：How to put fixed shadow on the bottom item of a list?如何在列表的底部项目上放置固定阴影？
【发布时间】：2022-01-25 18:15:21
【问题描述】：

我有一个文件选择器。 when select some file like this there is shadow on the bottom, when add more files like this the shadow must be still at the bottom, how can I do this?

【问题讨论】：

欢迎来到 Stack Overflow！我们不是免费的编码服务。您应该尽最大努力编写代码，然后将其发布在这里，以便我们帮助您修复它。见How do I ask a good question?
请阅读此艺术 https://stackoverflow.com/help/how-to-ask 并附上您的代码。
自己编写一些代码，待修正！另外，你的问题还不清楚。

标签： html css

【解决方案1】：

这将使您入门。它不是真正的阴影，但线性渐变背景会提供您正在寻找的效果，尽管您必须调整值才能完全达到您想要的效果。

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  flex: 1;
}

.container img {
  margin: 0 0 12px 0;
}

.overlay {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 100px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0) 100%);
}

<div class="container">
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <img src="https://i.stack.imgur.com/HQMHH.jpg" height="200" />
  <div class="overlay"> </div>

</div>

【讨论】：

【解决方案2】：

您可以使用 position: relative 从 div 获取阴影，作为最后一个 div:

div {
  padding: 10px;
  border: solid 1px white;
  width: 200px;
  height: 120px;
  background-image: url(https://s4.uupload.ir/files/گیتار-14_1x2o.jpg);
  background-size: cover;
}

.shadow {
  width: 200px;
  height: 120px;
  padding: 10px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7));
  position: relative;
  top: -140px;/*equal to height & padding from divs*/
}

<body>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div class="shadow"></div>
</body>

【讨论】：