要素の左側と右側にのみボックス シャドウを作成するにはどうすればよいですか?

ボックスシャドウのカスタマイズ: 左側と右側のみにシャドウを実現する

要素の視覚的な魅力を高めるために、次のことを目指します。左右にのみ現れるボックスシャドウを組み込みます。ただし、現在の実装では、すべての面に影が表示されます。この課題に対処するために、複数のボックス シャドウを使用した解決策を検討してみましょう。

まず、目的の側面にシャドウを実現することに焦点を当てましょう。プロパティ内の値を調整することで、水平および垂直のオフセットを設定できます。次のコードを確認してください:

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

この例では、最初の box-shadow は左端から 12 ピクセル、その下 15 ピクセルの位置に右に伸びるシャドウを作成します。 2 番目の box-shadow は、右側の影をシミュレートします。

ただし、上下の端に影がないため、影にわずかなギャップがあることに気づくかもしれません。これを修正するには、追加のボックス シャドウが必要です。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

これらの追加のシャドウは、要素の周囲に白い「境界線」を作成することでマスキングを導入します。これにより隙間が効果的に隠され、きれいな水平方向の影が得られます。

このテクニックは完璧ではなく、いくつかの小さな不完全な点が見つかる可能性があることに注意してください。ただし、左側と右側だけで影を実現し、要素の美的魅力を高める実用的なアプローチを提供します。

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