ボックスに影をつける

2015年6月26日

ボックスに影を付ける時に使用するのが
「box-shadow」プロパティです。
これの値に影の距離やぼかしの距離、影の広がりの
数値を設定します。

それぞれの値は、半角スペースで区切ります。
水平方向・垂直方向以外の２つの影の距離以外は
書かなくても大丈夫です。

影の広がりをせってしたい場合、ぼかしの距離が不要な場合は
省略することができず、「0px」と書かなけばなりません。

影の距離をプラスにすると、水平方向の場合は右に、
垂直方向の場合は下に影ができます。マイナスに
するとそれぞれ逆の方向に影ができます。

値	内容
水平方向の距離(px) 垂直方向の距離(px) ぼかしの距離(px) 影の広がり(px) 影の色(カラーコード) inset(影を内側に付ける)	ボックスに影を付ける。

設定方法は下記のサンプルコード test.cssの
16行目~30行目をご覧ください。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        margin:24px;
        width:180px;
        height:120px;
        border:1px solid #000000;
    }
    .shadowRed{
        /* 左の数値から
         水平距離　垂直距離　ぼかし　ひろがり　色 を表す*/
        box-shadow:8px 8px 4px 4px #ee6677;
    }
    .shadowBlue{
        /* 左の数値から
         水平距離　垂直距離　ぼかし　ひろがり　色 を表す*/
        box-shadow:-8px -8px 4px 4px #5566ee;
    }
    .shadowGreen{
        /* 左の数値から
         水平距離　垂直距離　ぼかし　ひろがり　色 を表す*/
        box-shadow:8px 8px 12px 12px #45f067;
    }

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

margin:24px;

width:180px;

height:120px;

border:1px solid #000000;

}

.shadowRed{

/* 左の数値から

水平距離　垂直距離　ぼかし　ひろがり　色を表す*/

box-shadow:8px 8px 4px 4px #ee6677;

}

.shadowBlue{

/* 左の数値から

水平距離　垂直距離　ぼかし　ひろがり　色を表す*/

box-shadow:-8px -8px 4px 4px #5566ee;

}

.shadowGreen{

/* 左の数値から

水平距離　垂直距離　ぼかし　ひろがり　色を表す*/

box-shadow:8px 8px 12px 12px #45f067;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box shadowRed"></div>
    <div class="box shadowBlue"></div>
    <div class="box shadowGreen"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</body>

</html>