Sponser Link
四角い領域やテキストに影をつける方法
[html] <div></div>[/html] [css] div{
width:200px;
height:100px;
background:#fff;
box-shadow:10px 20px rgba(0,0,0,.4)黒でアルファ0.4右下に影右に10px左に20px
}
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]
Sponser Link