box-shadowを使った柔軟な縁取り

こんにちは、joniyです。
今回はCSS3のbox-shadowを使った柔軟な縁取り方法について触れます。

基本事項

box-shadowには、6つの値が設定できます。

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> <inset>

また、コンマ区切りで複数のbox-shadowを設定でき、前に記述されたものから上に描画されます。
指定するボックスがborder-radiusを使って角を丸くしていても追従します。

offset-x offset-y

offset-xは水平方向を指定します。
正の値を指定すると下に移動し、負の値を指定すると上に移動します。
offset-yは垂直方向を指定します。
正の値を指定すると右に移動し、負の値を指定すると左に移動します。
両方とも0を指定すると、要素と重なるようにbox-shadowが適用されます。

例1

.shadow {
    box-shadow: 5px 0px 0px 5px black;
}

例2

.shadow {
    box-shadow: -5px 0 0px 5px black;
}

例3

.shadow {
    box-shadow: 0 5px 0px 5px black;
}

例4

.shadow {
    box-shadow: 0 -5px 0px 5px black;
}

例5

.shadow {
    box-shadow: 10px 10px 0px 5px black;
}

blur-radius

値に比例して、ぼかしの範囲が広くなります。
負の値は指定できません。指定が無かった場合は0として処理されます。

例1

.shadow {
    box-shadow: 0 0 5px 0px black;
}

例2

.shadow {
    box-shadow: 0 0 20px 0px black;
}

spread-radius

box-shadowの幅が指定した値に応じて太くなります。
負の値は指定できません。指定が無かった場合は、0として処理されます。

例1

.shadow {
    box-shadow: 0 0 0px 5px black;
}

例2

.shadow {
    box-shadow: 0 0 0px 10px black;
}

inset

指定しているとボックスの内側にbox-shadowを適用します。

例1

.shadow {
    box-shadow: -10px -10px 0px 5px black inset;
}

例2

.shadow {
    box-shadow: 10px 10px 0px 5px black inset;
}

多重線

コンマ区切りで複数のbox-shadowを指定することができます。

例1

.shadow {
    box-shadow:
    0px 0px 0px  4px lightblue inset,
    0px 0px 0px  8px blue inset,
    0px 0px 0px 12px blueviolet inset,
    0px 0px 0px  4px green,
    0px 0px 0px  8px yellow,
    0px 0px 0px 12px orange,
    0px 0px 0px 16px red,
    3px 3px 7px 16px black;
}

例2
先に記述したものが上に表示されるため、順番を間違えると他の色を塗りつぶしてしまいます。

.shadow {
    box-shadow:
    0px 0px 0px 12px blueviolet inset,
    0px 0px 0px  4px lightblue inset,
    0px 0px 0px  8px blue inset,
    0px 0px 0px 16px red,
    0px 0px 0px  4px green,
    0px 0px 0px  8px yellow,
    0px 0px 0px 12px orange,
    3px 3px 7px 16px black;
}

border-radius使用時

例1

.shadow {
    box-shadow: 2px 2px 3px 0px black;
}

例2

.shadow {
    box-shadow: 0px 0px 5px 1px black;
}

終わりに

box-shadowについて紹介しました。
ついつい最低限の機能を実装して満足してしまい、
見た目を整えることを後回しにしてしまいがちですが、
枠線をつけたり、影をつけたりしてよりわかりやすく
見やすいものにすることを常に意識していきたいですね。

参考

以下のサイトを参考にさせていただきました。
CSS3リファレンス|box-shadow
MDN|box-shadow
CSSで複数のボーダを付ける方法