CSS を使用して要素に複数のドロップシャドウを適用する

CSS で Photoshop ボタンのデザインを再作成しようとすると、要素に複数のボックス シャドウを適用する際に制限が発生する場合があります。単一の要素。デフォルトでは、CSS は内側または外側のアクティブなボックス シャドウを 1 つだけ許可します。

この制限を克服するには、CSS3 が提供するカンマ区切り機能を利用できます。これにより、同じ box-shadow プロパティ内で複数のシャドウ定義を指定できます:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

区切ることにより2 つのシャドウ定義をカンマで区切ると、ボタン要素に 2 つの異なるシャドウを効果的に作成できます。最初のシャドウ、inset 0 2px 0px #dcffa6 は内側のライト ボックスのシャドウを表し、2 番目のシャドウ、0 2px 5px #000 は外側のドロップ シャドウを作成します。

このテクニックを使用すると、目的のボタンを実現できます。 2 つのシャドウを同時に適用してスタイリングし、よりリアルで視覚的に魅力的な効果を提供します。