javascript - 如何给一个盒子阴影元素或阴影从中间淡出的元素？

Question

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

标签： javascripthtmlcssreactjs

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>