[CSS]text-shadowプロパティでテキストに影を追加

2014年3月20日2021年11月17日

書式
text-shadow : 値1　値2　値3　値4
値1 (offset-x)
水平方向の距離を指定します。負の値であればテキストの左に影を配置します。
値2 (offset-y)
垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。
値3 (blur-radius)
この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
値4 (color) 色を指定
使用例

1.影を右に15px,下に15pxにします

<style>
  .cft {
    text-shadow: 15px 15px ;
  }
</style>
<div class="cft">text-shadowテキストに影を追加</div>

2.影のぼかし値3pxを設定します

<style>
  .cft {
    text-shadow: 15px 15px 3px ;
  }
</style>
<div class="cft">text-shadowテキストに影を追加</div>

3.影の色を指定します

<style>
  .cft {
    text-shadow: 10px 20px 2px skyblue;
  }
</style>
<div class="cft">text-shadowテキストに影を追加</div>