CSS text-shadow

text-shadowは、HTMLのテキストに影を描くCSSプロパティです。このページでは、text-shadowプロパティの使い方とサンプルをご紹介します。

構文

text-shadow: none

text-shadow: [color] horizontal vertical [radius]

none

テキストに影を付けない。

<p style="text-shadow: none">none</p>

none

color

影の色を指定する。影の色を省略すると、黒い影が描かれる。

<p style="text-shadow: black 2px 2px">black</p>
<p style="text-shadow: gray 2px 2px">gray</p>
<p style="text-shadow: silver 2px 2px">gray</p>

black

gray

silver

horizontal

水平方向のオフセットを指定する。水平方向のオフセットは要素の幅に影響を与えないため、左右の要素に影が被ることがある。

<p style="text-shadow: silver 1px 0">1px</p>
<p style="text-shadow: silver 2px 0">2px</p>
<p style="text-shadow: silver 4px 0">4px</p>

1px

2px

4px

vertical

垂直方向のオフセットを指定する。垂直方向のオフセットは要素の高さに影響を与えないため、上下の要素に影が被ることがある。

<p style="text-shadow: silver 0 1px">1px</p>
<p style="text-shadow: silver 0 2px">2px</p>
<p style="text-shadow: silver 0 4px">4px</p>

1px

2px

4px

radius

ぼかし半径を指定する。ぼかし半径を省略すると、影をぼかさない。

<p style="text-shadow: silver 4px 4px 1px">1px</p>
<p style="text-shadow: silver 4px 4px 2px">2px</p>
<p style="text-shadow: silver 4px 4px 4px">4px</p>

1px

2px

4px

初期値

text-shadow プロパティの初期値は none である。text-shadow プロパティが指定されていないテキストに影は付かない。

適用対象

テキストに対して text-shadow プロパティが適用される。

継承

親要素に対して指定した text-shadow プロパティは、その子孫の要素へ継承される。

<div style="text-shadow: silver 4px 4px 1px; font-size: large">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>いろはにほへと</p>
</div>

関連記事

• CSS box-shadow property

参考文献

World Wide Web Consortium (2022) CSS Text Decoration Module Level 3