● 説明
① ＣＳＳ３はＩＥ８やＩＥ7では機能しないので注意してください。
② ＣＳＳ３のbox-shadowを利用してボックスの影をシュミレーションします。
③ セレクタ名（場所の名前）の入力が必要です。
セレクタ名（場所の名前）はセレクタ名とします。
セレクタ名（場所の名前）の最初の１文字は英字としてそれ以外は英数字、記号とします。
④ ＣＳＳは一番最後に追加します。
● box-shadowの内容
① 形式
box-shadow:水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;
例
box-shadow:10px 20px 30px 40px #ff00ff inset;
② 説明
・10px は水平方向の影の距離です。（マイナス指定ができます）
・20px は垂直方向の影の距離です。（マイナス指定ができます）
・30px は影のぼかしの距離です。（マイナス指定はできません）
値が大きくなるとぼかしが強くなり、0を指定するとぼかしはされません。
・40px は広がりの距離です。（マイナス指定ができます）
正の値（プラス）を指定すると上下左右に影がつきます。
負の値（マイナス）が指定された場合、影は縮小されます。
省略が可能で省略された場合は、0を指定したと解釈されます。
・#ff00ff の影の色コードです。(red black green などの色名指定も可能）
・inset は内側の影にします。
省略が可能で、省略すると外側の影になります。
・結果（ＣＳＳ）のセレクタについて。
もし、カーソルを乗せた時の変化の場合は、セレクタ名を下記の様に:hoverを付けます。
（セレクタ名 abc でクラスの場合）
.abc:hover{
尚、クラスは . ＩＤは # です。
この部分は結果で表示されたＣＳＳ部分を調整してください。
③ その他
ＣＳＳ３作成のボタンをクリックするとＣＳＳが作成されて
下にそのbox-shadow実行のＣＳＳの結果が表示されます。
● 例
① 記事などにＨＴＭＬモードで下記の様に記述します。
<div class="box001"></div>
② 下記の様にＣＳＳへ追加します。
.box001{
width:60px;/* 幅 */
height:60px;/* 高さ */
display:block;
margin:50px;/* 上下左右の外側余白 */
}
.box001{
box-shadow:0 0 20px black,
20px 15px 30px yellow,/* 右下 */
-20px 15px 30px lime,/* 左下 */
-20px -15px 30px blue,/* 左上 */
20px -15px 30px red;/* 右上 */
}
角丸を組み合わせると下記の様になります。
更に下記をＣＳＳへ追記します。
.box001{
border-radius: 32px;/* CSS3角丸 */
-moz-border-radius: 32px;/* Firefox角丸 */
-webkit-border-radius:32px;/* Safari、Google Chrome角丸 */
}