影の効果は Web デザインでよく使用され、要素を非常にうまく強調することができます.CSS3 が登場する前は、画像を使用してテキストや要素に影の効果を追加する必要があり、非常に不便でした. CSS3 の登場後、text-shadow と box-shadow の 2 つのプロパティを使用して、画像を使用せずにテキストまたは要素に影の効果を追加できます。
図: Text-shadow プロパティのデモ 
図: Box-shadow プロパティのデモ
コンテンツ
表示
1. text-shadow (テキストシャドウ)
CSS の text-shadow プロパティを使用して、テキストの影の効果を設定できます. プロパティの構文は次のとおりです:
text-shadow: offset-x offset-y blur color;
構文は次のように説明されています。
- offset-x: 必須パラメーター。影の水平オフセットを設定します。負の値を指定できます。
- offset-y: 必須パラメーター。影の垂直方向のオフセットを設定します。負の値を指定できます。
- blur: オプションのパラメータ。ぼかしの半径を設定します。値が大きいほど、ぼかしが大きくなり、影のエッジがぼやけます。負の値は使用できません。
- color: オプションのパラメーター。影の色を設定します。省略または指定しない場合、color 属性の値が使用されます。
ヒント: 複数の影効果セットを同時に設定するには、text-shadow 属性を使用します。各セットはコンマで区切られます。定義された複数の影効果セットは、最初の影が一番上にある定義順にリストされます。 、 等々。さらに、テキストの影効果をキャンセルしたい場合は、text-shadow 属性の値を none に設定できます。
[例] text-shadow 属性を使用して、テキストに影効果を追加します。
<!DOCTYPE html>
<html>
<head>
<style>
p.ichi {
text-shadow: 3px 5px 5px #FF0000;
}
p.ni {
color: white;
text-shadow: 1px 1px 2px black,
0 0 25px blue,
0 0 5px darkblue;
}
</style>
</head>
<body>
<p class="ichi">文本影響の効果</p>
<p class="ni">文本影響の効果</p>
</body>
</html> 実行中の効果を次の図に示します。
2.box-shadow(ボックスシャドウ)
CSS の box-shadow プロパティを使用して、HTML 要素の影の効果を設定できます. プロパティの構文は次のとおりです:
box-shadow: h-shadow v-shadow blur spread color inset;
構文は次のように説明されています。
- h-shadow: 必須パラメーター。影の水平方向のオフセットを設定します。負の値を指定できます。
- v-shadow: 必須パラメーター。影の垂直方向のオフセットを設定します。負の値を指定できます。
- blur: オプションのパラメータ。ぼかしの半径を設定します。値が大きいほど、ぼかしが大きくなり、影のエッジがぼやけます。負の値は使用できません。
- spread: オプションのパラメーター、影のサイズを設定します。
- color: オプションのパラメーター。影の色を設定します。
- inset: オプションのパラメーター。デフォルトの外側の影 (アウトセット) を内側の影に変更します。
ヒント: text-shadow 属性と同様に、box-shadow 属性でも複数のグループの影効果を同時に設定できます.各グループはコンマで区切られます.定義された複数の影効果グループが定義順にリストされます. . 最初の影は末尾にあり、上にあり、以下同様です。
[例] box-shadow プロパティを使用して、テキストに影効果を追加します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #CCC;
float: left;
margin: 5px;
}
div.ichigo {
box-shadow: 2px 2px 5px #000;
}
div.ni {
box-shadow: 2px 2px 5px #000 inset;
}
div.san {
margin-left: 10px;
box-shadow: 0px 0px 0px 3px #bb0a0a,
0px 0px 0px 6px #2e56bf,
0px 0px 0px 9px #ea982e;
}
</style>
</head>
<body>
<div class="ichigo"></div>
<div class="ni"></div>
<div class="san"></div>
</body>
</html> 実行中の効果を次の図に示します。
「CSS シャドウ効果 (2 つの方法)」についてわかりやすく解説！絶対に観るべきベスト2動画
HTML&CSS補足編 #6 box-shadowで要素に影をつけてみよう！
text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
