css - 左右のみボックスシャドウ

Question

左右にのみ影がある要素に、インセット ボックス シャドウを作成しようとしています。私はそれを働かせることができません。

これが私が試したボックスシャドウです：

 box-shadow: inset 10px 0px 25px 0px rgba(0,0,0,0.45);

右側用にもう1つ追加します。問題は、この設定でも影が上下にわずかに表示され、表示されずに左側に影が表示されないことです。これは可能ですか？

jsフィドル

Answer 1

影を縮小するには、spread-radius (4 番目の値)に負の値を使用します。これにより、不要な上下の影を隠すことができます。

box-shadow: inset 25px 0px 25px -25px rgba(0,0,0,0.45), inset -25px 0px 25px -25px rgba(0,0,0,0.45);

デモを参照してください。