CSS の単一要素に複数のボックス シャドウを作成するにはどうすればよいですか?

単一の要素で複数の CSS3 ボックス シャドウを使用する

CSS では、CSS3 を使用して複数のボックス シャドウを単一の要素に適用できます。これにより、内側のグローと外側のドロップ シャドウを組み合わせるなど、複雑なシャドウ効果を作成する際の柔軟性が高まります。

問題:

次の Photoshop モックアップを複製したいと考えています。ボタンには 2 つのシャドウがあります。内側のライト ボックス シャドウと外側のドロップ シャドウです。ただし、CSS の box-shadow プロパティでは、要素ごとに 1 つのシャドウ効果しか許可されないようです。

解決策:

必要な二重シャドウ効果を実現するには、次のようにします。複数のシャドウを指定するためのカンマ区切りの構文。例:

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

このコード内:

• 最初のシャドウは、明るい色 (#dcffa6) と 2px のオフセットを持つインセット ボックスのシャドウです。
• 2 番目の影はドロップ シャドウで、暗い色 (#000) で、水平方向に 2 ピクセル、垂直方向に 5 ピクセルのオフセットが設定されています。

これらの影をカンマで区切ることで、 、必要に応じて、内側のグローと外側のドロップ シャドウの両方を備えたボタンを作成できます。

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