[CSS] 影を付ける
影を付けるには、box-shadow を使用します。
直線の影を付ける
右に5px、下に3pxずらした直線の影を付ける
|
1 2 3 4 5 |
.sample1{ width:200px; border:1px solid #808080; box-shadow:5px 3px; } |
|
1 |
<p class="sample1">あいう</p> |
【結果】
あいう
左や上にずらしたい場合は値をマイナスにすればＯＫです。
box-shadow:-5px -3px;
ぼやかした影を付ける
右に5px、下に3px、ぼやかし幅10pxの影を付ける
|
1 2 3 4 5 |
.sample2{ width:200px; border:1px solid #808080; box-shadow:5px 3px 10px; } |
|
1 |
<p class="sample2">あいう</p> |
【結果】
あいう
左や上にずらしたい場合は値をマイナスにすればＯＫです。
box-shadow:-5px -3px 10px;
四方向にぼやかした影を付ける
四方向にぼやかし幅10pxの影を付ける
|
1 2 3 4 5 |
.sample3{ width:200px; border:1px solid #808080; box-shadow:0px 0px 10px; } |
|
1 |
<p class="sample3">あいう</p> |
【結果】
あいう
影の色を指定する
影の色を指定したい場合は、box-shadowの最後に色を指定すればOKです。【赤色を指定した例】
box-shadow:5px 3px red;
box-shadow:5px 3px 10px red;
box-shadow:0px 0px 10px red;