この記事でお伝えしたいこと
この記事は、cssで複数の線をつける方法についてです。
要素に複数の線をあてるのは非常に面倒ですが、こちらで紹介した方法を用いることで簡単に実現ができます。以下ではその方法を紹介したいと思います。
作り方
サンプル
作り方
box-shadowというプロパティを利用します。
box-shadowは要素に影をつけるためのプロパティです。1
borderやoutlineとは異なり、一つの要素に複数設定することができます。2
box-shadow:0 0 0 10px #c00,0 0 0 10px #cc0 inset
box-shadowの三番目の数値はぼかし距離を設定する値です。これを0にすることで一切ぼやけない影、つまり、線の代わりになります。
ただし、注意点としてbox-shadowのデフォルトの設定では、widthの値の外側になってしまいます。それを防ぐためにこちらのサンプルでは、insetという値を入れて、widthの中に含まれるようにしました。
参考文献
CSSシークレット ―47のテクニックでCSSを自在に操る
http://ur0.biz/AG7B
-
borderにはdoubleという設定で二重線がひけますがそれでは同色になってしまいます ↩