1. ホーム
  2. ハイパーリンク

[解決済み】左側と右側だけにボックスシャドウを表示する方法

2022-04-03 01:21:27

質問

左側と右側(水平方向?)にだけボックスシャドウをつける方法があれば、ハックや画像なしで教えてください。私は使用しています。

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

でも、全体に影がつくんですよね。

要素の周りにボーダーがないのですが。

どうすればいいですか?

<ブロッククオート

注意 を確認することをお勧めします。 ハミッシュの回答 この解決策には、不完全なマスキングは含まれていません。


複数のボックスシャドウを使用することで、より近い効果を得ることができます(左右に1つずつ)。

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

http://jsfiddle.net/YJDdp/

編集

ボックスシャドウを上下に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);

http://jsfiddle.net/LE6Lz/