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

Question

我知道可以设置<hr>元素的样式，但我不知道如何实现以下内容：

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

Answer 1

使用border-top和border-bottom。

<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/