html5 & css3メモ divタグに影をつけてみる

プログラミング

こないだのtableの角を丸める記事(記事はここ)に続いて、今度は影。
影もねぇ…画像でがんばってたもんだったなぁ…。

htmlページはこんな感じ。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            div {
                background-color:white;
                box-shadow:3px 3px 3px 3px rgba(0,0,0,0.3); /* 影の大きさと色を設定する */
                margin:10px;
            }
        </style>
    </head>
    <body>
        <div>box-shadow:3px 3px 3px 3px rgba(0,0,0,0.3)</div>
    </body>
</html>

やるこた、こんだけ。

  1. cssで影をつけたいタグ、クラス、ID（今回は<div>タグ）のスタイルにbox-shadowのプロパティと値(影の大きさと色)を書く

で、Firefoxで確認してみたらこんな感じ。

17648_01

ま、メモってことで。