Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。
デモページはこちら
box-shadowプロパティは、水平方向の距離→垂直方向の距離→ぼかしの距離→広がりの距離→影の色→insetの順に指定します。水平方向の距離と垂直方向の距離は省略不可です。他のプロパティは省略できますが、省略した場合は初期値が適用されます。
【初期値】
ぼかしの距離:0
広がりの距離:0
影の色:ブラウザのユーザーエージェントによる
inset:指定すればボックスの内側に影、指定しなければボックスの外側に影
Photoshopのレイヤースタイルで作成したドロップシャドウの値に合わせて、box-shadowプロパティの値を指定します。

| Photoshop | CSS |
| 角度:90度、距離:3px | 水平方向の距離:0、垂直方向の距離:3px |
| サイズ:7px | ぼかしの距離:7px |
| スプレッド:0% | 広がりの距離:0 |
| 影の色:黒、不透明度:35% | 影の色:rgba(0, 0, 0, 0.35) |
.div01 {
margin: 0 0 1em;
padding: 40px;
background-color: #fff;
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
}
垂直方向ではなく右下方向へドロップシャドウを適用する場合は、以下のように水平方向の距離を設定します。
.div02 {
margin: 0 0 1em;
padding: 40px;
background-color: #fff;
box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.35);
}
なお、box-shadow: none;を指定すればドロップシャドウを打ち消すことができます。





