奥行きを出すためのシャドウの追加

ボックスシャドウを使用することで、要素が背景の上に浮かんでいるような視覚効果を作り出すことができます。この効果は、ウェブページに奥行きを与えたり、特定の要素を強調したり、視覚的な魅力を追加したりするのに役立ちます。これを実現するには、box-shadowプロパティを適用します。

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x はシャドウの水平方向の位置を指定し、正の値で要素の右側、負の値で左側にシャドウが移動します。
• offset-y はシャドウの垂直方向の位置を指定し、正の値で下側、負の値で上側にシャドウが移動します。
• blur-radius はシャドウのぼかし具合を設定するオプション値で、値が大きいほどぼかしが強くなります。
• spread-radius もオプションで、正または負の値によってシャドウの大きさを増減させます。
• color は任意の有効なカラーフォーマットでシャドウの色を指定するオプション値です。

box-shadow に加えて、text-shadow および drop-shadow プロパティは、それぞれテキストや他の要素に影を作成することができます。これらは box-shadow プロパティと同様の方法で動作します。ただし、これらのプロパティは box-shadow. と比べて使用頻度が低いです。