どのブラウザでも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(赤,緑,青,透明度)」の値を記述。
同じカテゴリーのコンテンツ
