[CSS] 影を付ける

影を付けるには、box-shadow を使用します。

直線の影を付ける

右に5px、下に3pxずらした直線の影を付ける

.sample1{
  width:200px;
  border:1px solid #808080;
  box-shadow:5px 3px;
}

.sample1{

width:200px;

border:1px solid #808080;

box-shadow:5px 3px;

}

<p class="sample1">あいう</p>

1	<p class="sample1">あいう</p>

【結果】

あいう

左や上にずらしたい場合は値をマイナスにすればＯＫです。

box-shadow:-5px -3px;

右に5px、下に3px、ぼやかし幅10pxの影を付ける

.sample2{
  width:200px;
  border:1px solid #808080;
  box-shadow:5px 3px 10px;
}

.sample2{

width:200px;

border:1px solid #808080;

box-shadow:5px 3px 10px;

}

<p class="sample2">あいう</p>

1	<p class="sample2">あいう</p>

【結果】

あいう

左や上にずらしたい場合は値をマイナスにすればＯＫです。

box-shadow:-5px -3px 10px;

四方向にぼやかし幅10pxの影を付ける

.sample3{
  width:200px;
  border:1px solid #808080;
  box-shadow:0px 0px 10px;
}

.sample3{

width:200px;

border:1px solid #808080;

box-shadow:0px 0px 10px;

}

<p class="sample3">あいう</p>

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;