画像やトリックを使わずに水平ボックスシャドウを作成する方法?

水平ボックス シャドウを実現する方法

依存せずに左右 (水平?) 側のみで水平ボックス シャドウを実現する方法ボックスシャドウ効果を実現するためのトリックや画像はありますか?

次のコードを使用すると、周囲のシャドウ効果が生成されます:

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

解決策: 複数の box-shadow を使用します

複数のボックスを使用できます-shadow はこの問題を解決します。各 box-shadow対応する側:

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

不完全なシャドウのマスキング (オプション)

にじみ効果をさらにマスクするには、マスキング用のボックス シャドウを下部と上部に 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 サイトの他の関連記事を参照してください。