「CSS」四方向にぼやかした影を付けるサンプル
環境
Google Chrome 103.0.5060.53（Official Build）
構文
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: 0px 0px 10px skyblue;
}
</style>
</head>
<body>
<div class="cft">テストデータ山田太郎</div>
</body>
</html>
結果
四方向にぼやかし幅10pxの影を付けます。