カテゴリー: box-shadow

（例）【CSS3】box-shadowの使用方法

See the Pen
box-shadow by linlin (@linlin098765)
on CodePen.

<p class="sample1">box-shadow: 10px 10px; </p> 
<p class="sample2">box-shadow: 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample3">box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);</p>
<p class="sample4">box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;</p>	

p.sample1 {box-shadow: 10px 10px;} 
p.sample2 {box-shadow: 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample3 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);}	
p.sample4 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;}
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:50px;	
background-color:gray;
border:dotted 5px red;
}

【CSS3】box-shadow：ボックスに影を指定する

　CSS3のbox-shadowは、ボックスに影を指定するプロパティです。
　box-shadowは「水平方向の距離 垂直方向の距離 ぼかしの距離 影の色 inset」のように半角スペースを空けてそれぞれ指定します。