Style boxShadow 属性

定義と使用法

boxShadow 属性はボックス要素の投影（ドロップシェード）を設定または返します。

も参照してください：

CSS 参考マニュアル：box-shadow 属性

例

div要素にbox-shadowを追加：

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

実際に試してみてください

構文

boxShadow 属性の返り値：

object.style.boxShadow

boxShadow 属性の設定：

object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"

注記：boxShadow 属性はボックスに1つ以上の影を追加します。この属性は、カンマで区切られた影のリストで指定され、各影は2〜4つの長さ値、オプションの色値、およびオプションのinsetキーワードで指定されます。長さ値を省略すると0になります。

属性値

値 説明
none デフォルト値。影は表示されません。
h-shadow 必須。水平影の位置。負の値も許可されます。
v-shadow 必須。垂直影の位置。負の値も許可されます。
blur オプション。ぼかし距離。
spread オプション。影の大きさ。
color

オプション。影の色。デフォルト値は黒です。

参照してください CSS 色値、可能な色値の完全なリストを取得します。

ヒント：Safari（パソコン上）では、color パラメータは必須です。色を指定しないと影は表示されません。
inset オプション。外部影（outset）を内部影に変更します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： なし
返り値： 文字列，要素の box-shadow 属性。
CSS バージョン： CSS3

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート 9.0 サポート 5.1 サポート