box-shadow 使う時、影を出す方向を一方向に抑える
box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまうことになる。
.box-shadow { box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); }
左右の影を消すために、4番目の指定(広がり値)をぼかしの値と同じだけ負の値で指定(縮小)してあげると消える。
この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはならないっぽい。
.box-under-shadow { box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); }