CSSで複数のボーダーを付ける方法

CSSのbox-shadowを使って複数のボーダーを作ることができます。
色々な方法があると思いますが、今回は1つのプロパティに対して複数の値を付けることができるというのがポイントです。
ですのでソースはかなりシンプルです。

box-shadowは同時に何個でも記述できるようです。
（今回試してみたのは同時に6つの値）

1つの要素に対してサイズや色が違うものを「,（カンマ）」で区切って羅列すると、何重かになった枠（ボーダー）ができるのです。

box-shadowについて

box-shadowのプロパティで4つの値を指定するのが一般的ですが、実は6つの値を指定することができます。

box-shadow: inset x y blur spread color; 

• inset ・・・要素の内側に影。省略するとデフォルトの外側の影。
• xとy ・・・xは右方向、yは下方向へどのくらいずらすか。px,emなどで指定。
• blur ・・・ぼかし効果。そのくらいぼかすかpx,emなどで指定。
• spread ・・・影の大きさ。上下左右への広がりをpx,emなどで指定。
• color ・・・色を指定。

例えば、下記のように4つの値しか指定しなかった場合。

box-shadow: 3px 3px 3px #777; 

最初の3pxはx、2番目はy、3番目はblur、4番目はcolorとなり、spreadについては定義されないことになります。
一番一般的なCSSでの影の付け方です。

また、次のように記述した場合。

  box-shadow: 0px 0px 0px 5px #000;

x、y、blurが0pxでspreadだけに値を付けると、この場合は単にborderを5pxで指定したものと同じになります。

上記のCSSにさらに下記のように追加した場合。

  box-shadow: 0px 0px 0px 5px #000, 0px 0px 0px 10px #a9a9a9;

box-shadowの値を「,（カンマ）」で区切って羅列。

黒とグレーのボーダーができます。
CSSは後から記述された方が優先なので勘違いしがちですが、この場合は最初に記述したほうが上（上層）に表示されるようになるので注意が必要です。

複数ボーダーその1

box-shadowの性質をうまく利用して複数ボーダーを作成します。

<div class="multiple-borders">
  <img src="画像へのパス">
</div>

.multiple-borders {
 -webkit-box-shadow:
            0px 0px 0px 2px #696969,
            0px 0px 0px 12px #fff,
            0px 0px 0px 14px #a9a9a9,
            0px 0px 0px 16px #c0c0c0,
            0px 0px 0px 18px #808080,
            6px 6px 10px 18px #555;
   
     -moz-box-shadow:
            0px 0px 0px 2px #696969,
            0px 0px 0px 12px #fff,
            0px 0px 0px 14px #a9a9a9,
            0px 0px 0px 16px #c0c0c0,
            0px 0px 0px 18px #808080,
            6px 6px 10px 18px #555;
   
          box-shadow:
            0px 0px 0px 2px #696969,
            0px 0px 0px 12px #fff,
            0px 0px 0px 14px #a9a9a9,
            0px 0px 0px 16px #c0c0c0,
            0px 0px 0px 18px #808080,
            6px 6px 10px 18px #555;
}

今回はサンプル用に5種類のボーダーと影を付けてみました。
ですので1つの要素に6つの値を同時に指定ということになります。
6重にもボーダーを使う機会はあまりないかと思いますが、アイディア次第でうまくデザインに使えそうです。

複数ボーダーその2

その1をちょっとアレンジしてみました。

<div class="multiple-borders2">
  <img src="画像へのパス">
</div>

.multiple-borders2 {
   border:#696969 1px dashed;
   -webkit-box-shadow:
            0px 0px 0px 7px #fff,
            0px 0px 0px 9px #a9a9a9,
            0px 0px 0px 11px #c0c0c0,
            0px 0px 0px 13px #808080,
            6px 6px 10px 15px #555;
   
       -moz-box-shadow:
            0px 0px 0px 7px #fff,
            0px 0px 0px 9px #a9a9a9,
            0px 0px 0px 11px #c0c0c0,
            0px 0px 0px 13px #808080,
            6px 6px 10px 15px #555;
   
            box-shadow:
            0px 0px 0px 7px #fff,
            0px 0px 0px 9px #a9a9a9,
            0px 0px 0px 11px #c0c0c0,
            0px 0px 0px 13px #808080,
            6px 6px 10px 15px #555;
}

CSSの2行目にborderプロパティを追加し、box-shadowをそれぞれ調整しました。
今回使ったdashedという値（破線にする）はborderでしかできないので、box-shadowでつくる枠と併用してみました。