Internet Explorer 8以前の古いWebブラウザでは box-shadow, filter: drop-shadow() プロパティに対応していません。古いWebブラウザで枠に影を描画する場合は、
影を画像で表現する方法があります。影を画像で表現して枠に影をつける方法については、こちらの記事を参照して下さい。
box-shadow プロパティを利用する方法とfilter: drop-shadow()を利用する方法があります。body {
background: url('./back.jpg');
}
.frame {
text-align: left;
margin: 2rem auto 0 auto;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: #FFFFFF;
width: 420px;
box-shadow: 0 0 16px #606060;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CssDropShadow.css" />
</head>
<body>
<div class="frame">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
</div>
</body>
</html>
background プロパティを利用して背景画像を設定します。box-shadow プロパティを記述し枠の影の描画を設定します。.frame {
text-align: left;
margin: 2rem auto 0 auto;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: #FFFFFF;
width: 420px;
box-shadow: 0 0 16px #606060;
}
filter: drop-shadow(<offset-x> <offset-y> [<blur-radius>] [<color>]);
| <offset-x> | (必須) | 影の水平方向のずれを指定します。負の値を指定すると左側に、正の値だと右側にずれます。 |
| <offset-y> | (必須) | 影の垂直方向のずれを指定します。負の値で上方向に、正の値で下方向にずれます。 |
| <blur-radius> | (省略可能) | 影のぼかしの大きさを指定します。値が大きいほど影がぼやけます。省略した場合は 0 とみなされ、シャープな影になります。 |
| <color> | (省略可能) | 影の色を指定します。デフォルトは要素のコンテキストにより変動する場合がありますが、一般的には指定したほうが望ましいです。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CssDropShadowFilter.css" />
</head>
<body>
<div class="frame">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
</div>
</body>
</html>
body {
background: url('./back.jpg');
}
.frame {
text-align: left;
margin: 2rem auto 0 auto;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
background-color: #FFFFFF;
width: 420px;
filter: drop-shadow(4px 16px 8px #202020);
}
background プロパティを利用して背景画像を設定します。filter: drop-shadow() プロパティを記述し枠の影の描画を設定します。
