Box Shadow

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 42/76。

CSSでは、box-shadow プロパティを使用して、要素のボックスに影の効果を追加します。このプロパティを使用すると、要素がページから「飛び出している」ように見せたり、奥行きや立体感を表現したりする視覚的に魅力的なエフェクトを作成できます。

box-shadow プロパティを使用するための基本的な構文は次のとおりです。

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: 要素からの影の水平距離です。正の値を指定すると影は右に移動し、負の値を指定すると左に移動します。

vertical-offset: 要素からの影の垂直距離。正の値は影を下に移動させ、負の値は上に移動させます。

blur (オプション): 影のぼかし半径。値が大きいほど、よりぼやけた影が作成されます。省略した場合、デフォルトは 0 (ぼかしなし) になります。

spread (オプショナル): シャドウの広がり（spread radius）。正の値のときはシャドウが拡大し、負の値のときは縮小します。

color（任意）: 影の色。名前付きカラー、16進数値、RGB値、またはHSL値を使用して指定できます。
inset（任意）: 影を外側の影（outset）から内側の影（inner shadow）に変更します。

例えば：

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

この例では、すべての <div> 要素に 5px の horizontal offset、5px の vertical offset、10px の blur 半径、および gray の color を持つ box shadow が適用されています。button クラスを持つ要素には、2px の horizontal offset、2px の vertical offset、5px の blur 半径、2px の spread 半径、および半透明の black color（rgba(0, 0, 0, 0.5)）を持つ box shadow が適用されています。

チャレンジ

簡単

<div> と <p> を含む HTML ドキュメントが与えられています。あなたのタスクは box-shadow プロパティを使用して、これらの要素に影のエフェクトを追加することです。以下の手順に従ってください：

<div> 要素を対象とする CSS ルールを作成します。box-shadow を 10px 10px 5px gray に設定します。
<p> 要素を対象とする CSS ルールを作成します。box-shadow を -5px -5px 10px 2px rgba(0, 0, 0, 0.7) に設定します。

自分で試してみよう

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>