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

Question

我知道可以为<hr>元素设置样式，但是我不知道如何实现以下外观：

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

Answer 1

使用边框顶部和边框底部。

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

或者

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

Answer 2

我不确定我是否遵循您的问题，但您可能可以使用这样的渐变：

jsFiddle

像这样设置样式hr：

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

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

Answer 3

这是一种方法：

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

http://jsfiddle.net/KvGKV/