Html 如何使用css实现水平规则的以下样式

我知道可以设计元素的样式，但我不知道如何实现以下外观：

---

这可能很难看到，基本上它应该看起来像是水平方向的5px深棕色、浅棕色、5px深棕色，而且hr周围的图像中有背景，使其更加突出，这不是设计的一部分。使用css是否可以实现这一点？如果可以，我需要如何使用图形？

使用边框顶部和边框底部

<hr style="border-top: 1px solid #DEDDD9;border-bottom: 1px solid #DEDDD9;">

或

这里有一个方法：

<hr style="border:0;height:1px;background: #dfded9; border-right: 5px solid #b2b1ae;border-left: 5px solid #b2b1ae">

---

我不确定我是否理解你的问题，但你可以使用这样的梯度：

将hr设置为这样：

---

除了用你想要的颜色替换黑白。

使用边框（即边框底部）是使用hr的可行替代方案吗？是的，但我无法想象边框是如何以这种方式设计的，我正在努力用hr实现这一点。嗨，不是这样的，我知道它很难从图片上看到，但基本上它应该看起来像是在水平方向上，5px深棕色，浅棕色，5px深棕色

<hr style="border:0;height:1px;background: #dfded9; border-right: 5px solid #b2b1ae;border-left: 5px solid #b2b1ae">

hr {
    height: 10px;
    background-image: linear-gradient(black, white);
    background: -webkit-gradient(linear, center top, center bottom, from(black), to(white));
}