左右の距離
上下の距離

影のぼかし
影の広がり
影の色   影の透過

Get Code

背景色  
ボックスカラー  

click to open

preview

Copy

X

コピーしました

box-shadow

仕様

初期値 none
適用対象 すべての要素
値の継承 しない

設定できる値

スペース区切りで
<左右の距離> <上下の距離> <影のぼかし> <影の広がり> <影の色> <inset>
を指定する。
<影のぼかし> <影の広がり> <影の色> <inset>は省略可です。

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);
  <左右の距離> <上下の距離> <影のぼかし> <影の広がり> <影の色>

<左右の距離>

ボックスエレメントを起点に正の数の場合は右へ、負の数の場合は左へずれてシャドウを表示します。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

サンプルコードの結果

<上下の距離>

ボックスエレメントを起点に正の数の場合は下へ、負の数の場合は上へずれてシャドウを表示します。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

サンプルコードの結果

<影のぼかし>

省略可能な値(省略した場合は「0」を設定したのと同じ見た目になります)

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

サンプルコードの結果

<影の広がり>

省略可能な値(省略した場合は「0」を設定したのと同じ見た目になります)

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

サンプルコードの結果

<影の色>

省略可能な値(省略した場合は黒色の影ができます)

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8);

サンプルコードの結果

<inset>

insetを省略した場合はボックスエレメントの外側に影が付き、
inset指定した場合はボックスエレメントの内側に影が付きます。

サンプルコード

box-shadow: 15px 15px 20px 5px rgba(0, 0, 0, 0.8) inset;

サンプルコードの結果

スポンサーリンク

スポンサーリンク

pagetop