text-shadow
は CSS のプロパティで、テキストに影を追加します。文字列及びその装飾
に適用される影のカンマで区切られたリストを受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。
構文
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* color および blur-radius は既定値を使用 */
text-shadow: 5px 10px;
/* グローバル値 */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
このプロパティは、影のカンマで区切られたリストとして指定します。
それぞれの影は2つ又は3つの <length>
値と、任意でその後に <color>
値を続けることで指定します。最初の2つの <length>
値は、 <offset-x>
及び <offset-y>
の値です。3番目の <length>
値は、任意で、 <blur-radius>
です。 <color>
値は影の色です。
複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。
このプロパティは ::first-line
及び ::first-letter
の両方の擬似要素に適用されます。
値
<color>
- 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。
<offset-x> <offset-y>
- 必須。これらの
<length>
値はテキストに対する影のオフセットを指定します。<offset-x>
は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。<offset-y>
は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が0
ならば、影はテキストの真後ろに配置されますが、<blur-radius>
の効果により一部だけが見えるかもしれません。 <blur-radius>
- 省略可。これは
<length>
値です。指定されなければ、既定では0
になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | あり |
計算値 | 色、続けて絶対的な長さ 3 つ |
アニメーションの種類 | a 影のリスト |
形式文法
none | <shadow-t>#where
<shadow-t> = [ <length>{2,3} && <color>? ]
where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
例
単純な影
.red-text-shadow {
text-shadow: red 0 -2px;
}
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
複数の影
.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 3 text-shadow の定義 |
勧告候補 | CSS プロパティ text-shadow は CSS2 で不適切に定義され、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 CSS Text Decoration Module Level 3 に移動しました。 |
ブラウザーの互換性
BCD tables only load in the browser
Quantum CSS のメモ
- Gecko には
transition
にバグがあり、色が指定されたtext-shadow
から色が指定されていないtext-shadow
への移行が動作しません (バグ 726550)。これは Firefox の新しいパラレル CSS エンジン (Quantum CSS 又は Stylo とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。
関連情報
box-shadow
<color>
データ型 (影の色を指定するため)- CSS を使った HTML の要素への色の適用