DN*BLOG

CSS3 – box-shadow

box-shadowはボックスに影を付けてくれます。
Firefox、Safariで使用できます。

-webkit-box-shadow:x y ぼかし 色;

box-shadow

box-shadowの例です。Firefox、Safariで見てください。

CSSソース

.border-color {
	border:1px solid #339900;
	background-color:#e8e8e8;
	-webkit-box-shadow:6px 6px 8px #888;
	-moz-box-shadow:6px 6px 8px #888;
	padding:12px;
}

「x y」で影の距離を決めて、「ぼかし」の部分は数値をいれる。数値が高ければ高いほどぼかしが強くなる。

box-shadow

box-shadowその2の例です。Safariで見てください。

CSSソース

.border-color {
	border:1px solid #339900;
	background-color:#e8e8e8;
	-webkit-box-shadow:-5px -5px 0px #888;
	-moz-box-shadow:-5px -5px 0px #888;
	padding:12px;
}

「x y」にマイナスの値をいれると、影の方向が反対になります。
ぼかしを0にすると#888のボックスが配置されている感じになります。

Return to the page