box-shadow
box-shadowプロパティは、要素の周囲に影を追加します。
このプロパティは、カンマ区切りで複数の影を追加できます。
Live sample
box-shadow:
width: 200px;
height: 200px;
background: #DDCEA1;
box-shadow: 8px 8px 4px 0px #948B70;
width: 200px;
height: 200px;
background: #DDCEA1;
・inset キーワード、<offset-x>、<offset-y>、<blur-radius>、<spread-radius>、<color> の値を設定できます。
・<offset-x>、<offset-y>の値のみが必須で、他の値は任意で設定できます。
・複数の影を追加した場合、先に記述した影が手前に来ます。
・inset
insetを指定することで、要素の内側に影を追加できます。
・<offset-x>
水平方向に影を移動させます。
・<offset-y>
垂直方向に影を移動させます。
・<blur-radius>
影をぼかします。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、色も薄くなります。
・<spread-radius>
影の大きさを変化させます。負の値が指定された場合、影は縮小されます。
・<color>
影の色を変化させます。