最近のカード型のデザインには外枠に影(box-shadow)をつけるケースも多くなってきています。
box-shadow: offset-x offset-y blur-radius spread-radius color (inset);<offset-x>
と <offset-y>
: これらは必須の値で、影の位置を指定します。<offset-x>
は水平方向のオフセット、<offset-y>
は垂直方向のオフセットです。<blur-radius>
: 任意の値。影のぼかしの量を指定します。0の場合、鋭い影となります。<spread-radius>
: 任意の値。影のサイズを拡大/縮小します。正の値で影を広げ、負の値で影を狭めます。<color>
: 任意の値。影の色を指定します。指定しない場合、color
プロパティの値が使用されます。inset
: オプションのキーワード。これを使用すると、外向きの影ではなく、内側の影を作成します。影をつけることでモダンなデザインになります。