スタイル ボックス1 div

ここに：

• 「 #box1 」は、id box1 の div にアクセスするために使用されます。
• 「 幅 」プロパティは、要素の幅の設定に利用されます。
• 「 身長 ” プロパティは要素の高さを設定します。
• 「 国境 」には値 5px solid #ff9c83 が指定されます。ここで、5px は境界線の幅を示し、solid は境界線のスタイルを表し、#ff9c83 は色です。
• 「 ボックスシャドウ 」プロパティは「 8px 10px 15px 20px #807f7f ここで、8px は水平オフセット、10px は垂直オフセット、15px はぼかし効果、20px は拡散効果、#807f7f は影の色です。

スタイル box2 div

同じプロパティで box2 div のスタイルを設定したことがわかります。

おまけのヒント: HTML 要素に複数の影を追加する

「 ボックスシャドウ 」プロパティを使用して、HTML 要素に複数の影の効果を追加できます。これは、以下の例に示すように、すべての影の間にコンマを使用して実行できます。

ご覧のとおり、複数の影が正常に適用されています。

CSS ボーダー シャドウの使用方法は以上です。

結論

「 ボックスシャドウ CSS の ” プロパティを使用して、HTML 要素に影の効果を適用します。このプロパティは、主に水平オフセットと垂直オフセットの 2 つの値で構成されますが、ぼかし効果、拡散半径効果、色など、複数の値が存在する場合があります。さらに、各 box-shadow プロパティの間にコンマを使用して、要素に複数の影を追加することもできます。この記事では、CSS の box-shadow プロパティを具体的な例を挙げて説明しました。