CSS を使用して単一の要素に複数のドロップシャドウを実現するにはどうすればよいですか?

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

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

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

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

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

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

以上がCSS を使用して単一の要素に複数のドロップシャドウを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。