box-shadow CSS プロパティとは
トピック：1つまたは複数のシャドウエフェクトを要素のボックスに適用する、事ができる
プロパティ box-shadow
実例 コード 1
シャドウにぼかし効果を追加する：サンプル コードを試す #webref1 {
box-shadow: 10px 10px 8px #ff0000;
}
情報：- 複数のシャドウをカンマで区切って指定することができる。
border-radiusが指定された 、ボックスに適用される場合、影はその丸みも反映します。 複数のシャドウが指定されている場合、オーバーラップする順序は、最初に指定された 、テキストシャドーの場合のように最前面に 描画 される
プロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | 全要素.::first-letter. |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値（length は全て絶対値となり、color については計算値となる） |
|---|
CSS Version | CSS3 |
|---|
| Animation type : | shadow リスト |
|---|
| JavaScript 構文 | object.style.boxShadow="10px 20px 30px blue" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | box-shadow: none |h-offset, v-offset, blur, spread, color,|inset |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
none | デフォルト値。影が表示されない |
h-offset | 必須。影の水平オフセット。正の値は影をボックスの右側に置き、負の値は影をボックスの左側に置く |
v-offset | 必須。影の垂直オフセット。正の値は影をボックスの下に置き、負の値は影をボックスの上に置く |
blur | オプション。ぼかし半径 数値が高いほど、影がぼやけて表示される |
spread | オプション。スプレッド半径。正の値を指定するとシャドウのサイズが大きくなり、負の値を指定するとシャドウのサイズが小さくなる |
color | オプション。影の色。デフォルト値はテキストの色です。可能なカラー値の完全なリストについては、「CSSカラー値」を参照 。注意：Safari（PC）では、カラーパラメータが必要です。色を指定しないと、影はまったく表示されない |
inset | オプション。シャドウを外側のシャドウ（最初）から内側のシャドウに変更する |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
実例 コード 2
シャドウにぼかし効果を追加する：サンプル コードを試す #webref1 {
box-shadow: 10px 10px 8px #888888;
}
実例 コード 3
複数のシャドウを定義する：サンプル コードを試す #webref1 {
box-shadow: 5px 5px blue, 10px 10pxred, 15px 15px green;
}
実例 コード 4
insetキーワードを追加する：サンプル コードを試す #webref1 {
box-shadow: 5px 10px 20px red inset;
}
サポートするブラウザ対応・互換性
プロパティ値
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|
| border-width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS box-shadow | CSS プロパティ 値| 意味 使い方 実例 – WebRef