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

左側と右側のみにボックス シャドウを適用する方法

左側と右側のみにボックス シャドウ効果を適用するにはハックや画像を使用せずに側面を作成すると、複数のボックス シャドウを利用して目的の結果をシミュレートできます。方法は次のとおりです:

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

このコードは 2 つのボックス シャドウを作成します。1 つは左側 (-12px オフセット)、もう 1 つは右側 (12px オフセット) です。左の影の負のオフセットと -4px の使用により、影が内側に押し込まれ、左端と右端にのみ表示されるようになります。

注: 提供される解決策には「マスキング」が含まれるため、 「他の側から影を隠すには、参照回答で@Hamishによって提案されたものなど、代替アプローチを検討することを検討してください。これは、より堅牢なソリューションを提供します。

効果をさらに強化するには、追加のボックス シャドウを追加して、上部と下部にまだにじみ出る可能性のある影をマスクすることができます。

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);

このコードは効果的にマスクします。上下の影を消して、より洗練された望ましい効果を提供します。

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