CSS で内側のボックスと外側のボックスのシャドウを組み合わせることができますか?

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

CSS でドロップ シャドウを使用して要素をスタイリングすることは、多くの場合、視覚的に魅力的なデザインを作成するために不可欠です。 。ただし、ボタンに内側の影と外側の影の両方を追加するなど、一部のシナリオでは困難が生じる場合があります。この記事では、この問題の解決策を検討します。

この例では、Photoshop のインナー シャドウとドロップ シャドウ機能では、ライト ボックスの内側のシャドウ (2 ピクセル) とボタンの外側のドロップ シャドウ (5 ピクセル) の両方を適用するのが簡単であるように見えます。ただし、CSS では、box-shadow を単独で使用すると、挿入された box-shadow がオーバーライドされます。

この制限を回避するには:

コンマを使用してシャドウを結合します

CSS では、要素に複数のシャドウをカンマで区切って指定できます。このようにして、インナー シャドウやドロップ シャドウなど、さまざまなタイプを組み合わせた複雑なシャドウ エフェクトを作成できます。

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

この更新されたコードは、内側のライト ボックス シャドウと外側のドロップの両方を組み合わせて、目的の効果を生成します。ボタンに影を付けます。

以上がCSS で内側のボックスと外側のボックスのシャドウを組み合わせることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。