text-shadow【テキストの影】

メモ

構文 (※記述方法)

プロパティ備考
text-shadow:    none【影なし】
| [ 《length【長さ】》{2,3} && 《color【色】》? ]#

手前から奥に記述
1つ目の<length【長さ】>水平方向の影のオフセット
2つ目の<length【長さ】>垂直方向の影のオフセット
3つ目の<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.

関連