元素赋予框阴影？

【问题标题】：How do I give box shadow to a <div> element or <hr /> element where the shadow fades out from the middle?如何为阴影从中间淡出的 <div> 元素或 <hr /> 元素赋予框阴影？
【发布时间】：2020-11-24 14:58:43
【问题描述】：

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

【问题讨论】：

标签： javascript html css reactjs

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

&lt;div class="shadow"&gt;&lt;/div&gt;

【讨论】：

谢谢！我会试试这个，如果我能用你的想法得到想要的效果，那么我会把你的想法标记为正确答案。