MENU
  1. ホーム
  2. CSS
  3. text-shadow

text-shadow

CSS
2023.12.24

text-overflowプロパティは、CSSプロパティで、テキストに影を付けるために使用されます。

text-shadowの説明図
text-shadow要素
記法

.クラス名　{
　text-shadow: オフセット量　ぼかし半径　色;
}
オフセット量：1つ目水平方向　2つ目垂直方向
※0の場合はテキストの真後ろ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./text-shadow.css" />
    <title>text-shadowプロパティに関して</title>
  </head>

  <body>
    <p class="text-shadow1">text-shadow(真後ろ)</p>
    <p class="text-shadow2">text-shadow(オフセット指定)</p>
    <p class="text-shadow3">text-shadow(複数オフセット指定)</p>
  </body>
</html>
.text-shadow1 {
  text-shadow: 0px 0px 5px red;
}
.text-shadow2 {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.text-shadow3 {
  text-shadow: 3px 3px 3px red, 5px 5px 5px blue;
}
出力結果

text-shadow(真後ろ)

text-shadow(オフセット指定)

text-shadow(複数オフセット指定)

CSS