text-shadow【テキストの影】
メモ 外部リンク 構文 例
メモ
- テキストの影
- ::first-letter【先頭文字】 ・::first-line【先頭行】 との併用も可能
- 関連
外部リンク
構文 (※記述方法)
| プロパティ | 値 | 備考 |
|---|---|---|
| text-shadow: | none【影なし】 | [ 《length【長さ】》 {2,3} && 《color【色】》? ]# | 手前から奥に記述 |
| １つ目の<length【長さ】> | 水平方向の影のオフセット | |
| ２つ目の<length【長さ】> | 垂直方向の影のオフセット | |
| ３つ目の<length【長さ】> | 影をぼかす範囲 |
例
<style>
.ex { font-size: 20px; height: 1.5em; }
.ex3 { font-size: 20px; height: 3.5em; }
.firstLetter::first-letter { text-shadow: 2px 2px 4px red; }
.firstLine::first-line { text-shadow: 2px 2px 4px red; }
</style>
<div class="ex" style="text-shadow:1px 1px;">
The quick brown fox jumps over the lazy dog.</div>
<div class="ex" style="text-shadow:2px 2px 4px blue;">
The quick brown fox jumps over the lazy dog.</div>
<div class="ex" style="text-shadow:6px 6px 2px blue, 4px 4px 2px cyan, 2px 2px 2px red;">
The quick brown fox jumps over the lazy dog.</div>
<div class="ex" style="color: white; text-shadow: 1px 1px 2px black;">
The quick brown fox jumps over the lazy dog.</div>
<div class="ex firstLetter">
The quick brown fox jumps over the lazy dog.</div>
<div class="ex3 firstLine">
The quick brown fox<br> jumps over<br> the lazy dog.</div>
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox
jumps over
the lazy dog.
jumps over
the lazy dog.