box-shadow のデモページ

横方向のずれ、下方向のずれ共に指定

-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;

-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;

-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;

下方向のずれ指定

-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;

-moz-box-shadow: 0 2px 3px #000;
-webkit-box-shadow: 0 2px 3px #000;

-moz-box-shadow: 0 3px 3px #000;
-webkit-box-shadow: 0 3px 3px #000;

横方向のずれ指定

-moz-box-shadow: 1px 0 3px #000;
-webkit-box-shadow: 1px 0 3px #000;

-moz-box-shadow: 2px 0 3px #000;
-webkit-box-shadow: 2px 0 3px #000;

-moz-box-shadow: 3px 0 3px #000;
-webkit-box-shadow: 3px 0 3px #000;

ぼかし具合、影の色のみ指定

-moz-box-shadow: 0 0 1px #000;
-webkit-box-shadow: 0 0 1px #000;

-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;

-moz-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;

複数指定してみる

-moz-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;
-webkit-box-shadow: 0 0 4px #F00, 0 0 12px #000, 5px 5px 5px #000;

Copyright © 2010 CSS Lecture All rights reserved.