我如何给一个盒子阴影<div>元素或<hr />阴影从中间淡出的元素？

Question

我得到了一个 UI 设计，我被要求用 sass/css 在 React.js 中重新创建它。 所附图片是 UI 设计侧边栏的一部分。 正如您所看到的，在侧边栏中所选选项下方有一个框阴影效果，其中阴影开始从中间淡出。
我假设它可以通过将阴影效果放在<hr/>元素或<div>元素本身下来完成。 我已经完成了图标的位置和间距，我只需要实现阴影部分。
我如何获得这样的阴影效果？
请帮我解决一下这个。
谢谢你。

Answer 1

像这样的东西就是你要找的。

使用 z-index:-1，我们可以将伪元素定位在其父元素下方，并使用 box-shadow 的第 4 个参数，我们可以增加其范围。 调整数字以获得您想要的结果。

 .shadow { position: relative; width: 300px; height: 120px; background: #ccc; } .shadow::after { content: ''; display: block; position: absolute; bottom: 30px; left: 50%; box-shadow: 0 0 60px 60px rgba(0, 0, 0, 0.5); width: 0; height: 0; z-index: -1; }

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