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は以下になります。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ