「CSS」box-shadowプロパティでぼやかした影を付ける
説明
box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。
構文
box-shadow: offset-x offset-y blur-radius color ;
値が 2 つだけ与えられた場合、 <offset-x> および <offset-y> として解釈されます。
これらは 2 つの <length> 値で、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。
負の値が指定された場合、影は左方向に配置されます。 <offset-y> は垂直方向の距離を表します。
<blur-radius>
これは 3 つ目の <length> 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。
負の値は指定できません
使用例
<!DOCTYPE html>
<html>
<head>
<style>
.cft{
width:200px;
border:1px solid #808080;
box-shadow:-5px -4px 5px red;
}
</style>
</head>
<body>
<div class="cft">テストデータ山田 太郎</div>
</body>
</html>
結果
左に5px、上に4px、ぼやかし幅5pxの影を付けます。