2013.05.08
css

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

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

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

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

CSSで複数のボーダー

box-shadowについて

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

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

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

CSSソース
box-shadow: 3px 3px 3px #777; 

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

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

CSSソース
  box-shadow: 0px 0px 0px 5px #000;

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

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

CSSソース
  box-shadow: 0px 0px 0px 5px #000, 0px 0px 0px 10px #a9a9a9;

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

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

複数ボーダーその1

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

HTMLソース
<div class="multiple-borders">
  <img src="画像へのパス">
</div>
CSSソース
.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をちょっとアレンジしてみました。

HTMLソース
<div class="multiple-borders2">
  <img src="画像へのパス">
</div>
CSSソース
.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でつくる枠と併用してみました。

参考サイト: design shack
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP