box-shadow

このエントリーをはてなブックマークに追加

box-shadowプロパティは要素に対して影を設定することができるプロパティです。

box-shadowプロパティでは最初の値と2つ目の値が必須項目で、最初の値で影の横方向の移動距離を、2つ目の値で影の縦方向の移動距離を指定できます。

box-shadow: 10px 10px;

マイナスの距離を指定することで反対方向に移動します。

box-shadow: -10px -10px;

3つ目の値で影のぼかし距離を指定できます。

box-shadow: 10px 10px 10px;

4つ目の値で影の拡大距離を指定できます。マイナスの距離を指定すると縮小されます

box-shadow: 10px 10px 10px 10px;

プロパティの最初か最後で影の色を指定することができます。

box-shadow: 10px 10px blue;
box-shadow: rgba(0,0,0,0.5) 10px 10px;

また、プロパティの最初か最後に「inset」キーワードを付加することで影は要素に内側に描画されます。

box-shadow: inset 10px 10px;
box-shadow: 10px 10px 10px 10px blue inset;

,(カンマ)区切りで指定することでひとつの要素に複数の影を描画することが可能です。

box-shadow: inset 10px 10px,inset 10px 10px;

対応ブラウザ

IE Chrome Safari Firefox iOS Android
◯ 9〜 △ 1.0〜
◯ 10〜
△ 3〜
◯ 5〜
△ 3.5 〜
◯ 4〜
△ 3.2〜
◯ 4〜
△ 2.1〜
◯ 4〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

参考URL

7.1. Drop Shadows: the ‘box-shadow’ property - CSS3 - W3C
box-shadow - Can I use... Support tables for HTML5, CSS3, etc

登録日 : 2015年02月16日 最終更新日 : 2015年2月17日

同じカテゴリー(Box)のエントリー

検索

スポンサードリンク

バージョン

リファレンス