Learning site for website creation

最終更新日から1年以上経過しています

どのブラウザでもhrをいい感じに表示する

  • 投稿日:2014年04月11日

hrタグをブラウザ標準のデザインで表示すると微妙に見た目が違う。同じように見せるにはborderで指定。

hr {
  border: 0;
  border-top: solid 1px #000;
}

ちょっといい感じに見せたい時は半透明を使って以下のデザインだと汎用性がある。透明度は背景色の濃さで調整。

hr {
  border: 0;
  border-top: solid 1px rgba(0,0,0,.3);
  border-bottom: solid 1px rgba(255,255,255,.5);
}

ちなみにrgbaは色の指定方法で「rgba(赤,緑,青,透明度)」の値を記述。

hrを実際に表示


↑こんな感じ