CSSだけで、hr(Horizontal Rule）タグのスタイルを指定するテスト。

「hr」は、Horizontal Rule（水平方向の罫線）の略語で、webページのレイアウトの主流がcssになる以前から使われてきたタグの一種ですが、あまり目立たない存在で、現在でもhtmlのタグに width="90%"とかsize="2"、color="green"などと直接記述する指定が多く見受けられます。もっと複雑な指定もできるはずですが、ブラウザによる解釈がまちまちだったため、敬遠されてきた経緯があります。最近になって、古いInternet Explorerを除いて、スタイルが定まってきたようなので、cssだけでどの程度指定できるか試してみました。
◆ htmlの"width"　→　cssでも"width"
◆ htmlの"size"　→　cssでは"height"。"padding"でも高さが出せます。
◆ htmlの"color"　→　cssでは"background-color"
◆ backgroundが使えるので、当然background-imageも使えます。[ hr04、 hr05、 hr06 ]
◆ 最近は、css3を使って、hrにグラデーション効果を取り入れる例もあるようですが、ブラウザごとの実装の違いを考えると難しいところです。代わりに画像で同様の効果を出してみました。[ hr07 ]
hr01
hr02
hr03
hr04
hr05
hr06
hr07

cssソース

			hr.hr01 {height: 1px; background: green; border: 0; }

			hr.hr02 {height: 3px; background: red; border: 0; }

			hr.hr03 {height: 1px; padding:3px 0; background: #aaa; border: 0; }

			hr.hr04 {height: 13px; background-image: url(images/arrow.png); 

			　　　　　background-repeat: repeat-x; border: 0; }

			hr.hr05 {height: 13px; background-image: url(images/arrow2.png); 

			　　　　　background-repeat: repeat-x; border: 0; }

			hr.hr06 {height: 13px; background-image: url(images/arrow3.png);

			　　　　　background-repeat: repeat-x; border: 0; }

			hr.hr06 {height: 11px; background-image: url(images/arrow4.png);

			　　　　　background-repeat: no-repeat;　border: 0; }