cman.jp > WEBページ作成TOP > CSSリファレンス > 「ボックスのドロップシャドウ」
WEBページ作成
広告
box-shadow 「要素に影を付ける」
「box-shadow」は要素に影を付けることができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
box-shadowの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
box-shadow : 横方向 縦方向 [ぼかし] [広がり] [影色] [inset]; |
|||||
| プロパティ/設定値 | 意味 | ||||
| 横方向 | 横(水平)方向の影の長さ 「長さ・大きさの単位」参照 |
||||
| 縦方向 | 縦(垂直)方向の影の長さ 「長さ・大きさの単位」参照 |
||||
| ぼかし | 影のぼかし幅 「長さ・大きさの単位」参照 |
||||
| 広がり | 影の広がり幅 「長さ・大きさの単位」参照 |
||||
| 影色 | 影の色 「色作成」参照 |
||||
| inset | 影を内側に指定 | ||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
box-shadow のサンプル
| box-shadowの指定 | |||
|---|---|---|---|
| 横 (水平) |
15px
|
縦 (垂直) |
15px
|
| ぼかし |
20px
|
広がり |
指定なし
|
| 影色 |
#666666
|
内向き | |
| 関連するCSS(STYLE) | |
|---|---|
| text-shadow | 文字の影付け |
| box-sizing | ボックスの大きさの算出方法 |
広告