html - cssを使用して水平ルールの次のスタイルを実現する方法

Question

要素のスタイルを設定することは可能ですが<hr>、次の外観を実現する方法がわかりません。

見づらいかもしれませんが、基本的には（横向きに）5pxダークブラウン、ライトブラウン、5pxダークブラウンのように見えるはずです。また、画像の背景が時間の前後にあり、目立つようになっています。これは一部ではありません。設計。これは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

これが1つの方法です：

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

http://jsfiddle.net/KvGKV/