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

ボックス シャドウはハックなしで左側と右側に限定されます

質問:

ボックス シャドウを独占的に作成するにはどうすればよいですかハッキングやハッキングに頼ることなく、要素の左側と右側に画像?

答え:

このソリューションでは、指定された側ごとに 1 つずつ複数のボックス シャドウを使用します:

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

ただし、注目に値します。このアプローチは完全に完璧ではなく、影のにじみが発生する可能性があることに注意してください。これを軽減するには、追加のボックス シャドウを上部と下部に追加して、オーバーフローをマスクします。

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