CSS3のプロパティでボックス要素に影を付けることができます。box-shadowの基本的な仕様を理解しましょう。(影の向き);横方向と縦方向は必須で定義が必要です。その他の括弧が付いているものは、任意での指定になります。height:50px;}このCSSをDivタグに適応するとこのように右方向と下方向に影が付きます。影の基本の向きは右方向と下方向になります。そのため左方向と上方向に影を付けたいときは-(マイナス)指定をする必要があります。height:50px;}影を指定せずにぼかしのみを指定すると全方位に広がります。height:50px;}ただし、影を指定すると、指定した方向に対してぼかしがかかります。広がり広がりもぼかし同様の動きをします。height:50px;}影を指定せずに影の広がりのみを指定すると全方位に広がります。height:50px;}影の向きを指定すると、指定した向きに影が広がります。広がり5pxで10pxの影ができます。height:50px;}また、ぼかしと違い広がりは、マイナスの値を指定することもできます。マイナスの値を指定した場合は、影が収縮します。広がり-2pxで3pxの影ができます。影の色を指定しない場合は、デフォルトで黒(#fff)が設定されます。height:50px;}色をしてした場合は、このように指定した色になります。※ぼかしと広がりも影と同じ色になります。height:50px;}色の指定は「rgba」を使用して透明度の指定もできます。影はデフォルトで外向きに付きます。height:50px;}影を内向きに付けるときは「inset」と指定します。height:50px;}内向きと外向きの両方に影を付けるときはカンマで区切り、内向きと外向きの定義を指定します。box-shadowの指定方法はこれで以上です。box-shadowと他のプロパティを使いこなせば、このサイトのような立体的な影も付けられるようにもなりますので、是非この機会に覚えてみてください。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。