box-shadowプロパティを使って複数の境界線を設定する

境界線をCSSで設定するには、borderプロパティを使う方法があります。CSS3にはボーダーラインに影をつけるbox-shadowというプロパティがありますが、この影は何重にも設定することができます。つまり、box-shadowを使えば二重にも、三重にも境界線をつけることができます。

box-shadowプロパティの書式は、以下のようになります。

box-shadow:
 inset   影を内側にする場合に指定 ※省略時は外側
 h-offset 水平方向の影のオフセット ※省略時は0(オフセットしない)
 v-offset 垂直方向の影のオフセット ※省略時は0(オフセットしない)
 blur   影をぼかす距離 ※省略時は0(ぼかさない)
 spread  影の拡大距離 ※省略時は0(拡大しない)
 color   影の色の指定

以下は、class="multi-border"の要素に対して、黒と白の二重の境界線をつけたCSS例です。
古いブラウザ用にベンダープレフィックスの指定もしています。

ブラウザでの表示は下図のようになります。

二重境界線の表示例

border-radiusプロパティと組み合わせると、多重円を描くこともできます。

多重円の表示例

CSSは以下になります。

スポンサーリンク

ページの先頭へ