要素の水平方向の側面にのみボックス シャドウを作成するにはどうすればよいですか?

水平側面のみにボックス シャドウを作成する

要素の左右 (水平) 側面のみにまたがるボックス シャドウを実現するには、複数のツールを利用することを検討してください。 box-shadow の定義。

初期の box-shadowプロパティ、

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

は要素のすべての側面に影を生成します。左側と右側だけをターゲットにするには、2 つの個別のボックス シャドウを追加します。

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

これにより、右に 12 ピクセル、左に -12 ピクセル伸びるシャドウが作成され、目的の効果が得られます。

また、上下の影がわずかににじみ出る場合があります。これを軽減するには、2 つの追加のボックス シャドウを追加して、にじみをマスクします。

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 サイトの他の関連記事を参照してください。