css3の勉強～その11～box-shadow､text-shadow

四角い領域やテキストに影をつける方法

div{
width:200px;
height:100px;
background:#fff;
box-shadow:10px 20px 4px rgba(0,0,0,.4)3番目の数値はぼかし具合
}

div{
width:200px;
height:100px;
background:#fff;
box-shadow:10px 20px 4px 10px rgba(0,0,0,.4)4番目の数値は大きさ
}

div{
width:200px;
height:100px;
background:#fff;
box-shadow:10px 20px 4px 10px rgba(0,0,0,.4) inset insetは内側に作る影。左上から影が出てくる。
}

div{
width:200px;
height:100px;
background:#fff;
box-shadow:10px 20px 4px 10px rgba(0,0,0,.4) inset,
box-shadow:10px 20px 4px 10px skyblue; 『,』で区切って複数の影を付けることが出来る。内側と外側にに影のある状態。
}

h1{
text-shadow:2px 2px 0px rgba(0,0,0,.4) ;テキストはinsetと4番目の数値は使えない。複数は使える
[/css]