css - 両側に内側の影を付けることはできますか?

Question

-moz-box-shadow: inset 3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE;

これにより、内側の影が左側に配置されます。両側に内側の影を付けることは可能ですか?

Answer 1

box-shadow-3px複数の値を受け入れるため、オフセットを使用して値を繰り返すだけです。

-moz-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;

しかし、それらは影というよりは境界線のように見えます。おそらく、代わりに境界線を使用する必要box-sizing: border-boxがあります。幅やパディングから差し引くことができない場合に備えて、次のようにします。

border-left: 3px solid #BDD4DE;
border-right: 3px solid #BDD4DE;

Answer 2

こんな使い方もできます

box-shadow:0px 0px 5px Grey

最初と 2 番目の値はオフセット (オフセットを使用しない) で、3 番目の値はぼかし値です。