Html 如何使用CSS在特定区域添加框阴影？

我想使用CSS创建长方体阴影，但只在长方体的特定区域中创建

如上面的屏幕截图所示，我在一个站点上有一个蓝色的标题，在这个标题中，我想在一个特定的位置添加一个阴影，用红色框突出显示

---

我猜使用psuedo-element:after-on-header-div应该可以，但我不知道如何使用特定的样式添加阴影。我的意思是，如果你注意到，阴影在左右两侧都模糊了。

你可以参考一些css阴影生成器网站，让阴影出现在特定区域。希望这对你有所帮助。

---

谢谢。

您可以尝试以下方式：

div {
    width: 300px;
    height: 1px; 
    position:relative;
    margin-top:-1px;
    box-shadow: 10px 10px 5px #888888;
}

---

添加snippet或jsFiddle以查看到目前为止您已经尝试了什么。请使用伪元素来生成阴影。这实际上是一个经典的方法。您是否尝试过任何代码来显示您的问题，这些代码可以用来指出您的失败，并可用于显示一个工作示例？“阴影在左侧和右侧模糊”-在这种情况下，您最好首先不要使用方框阴影；但背景渐变在侧面逐渐变为透明。