cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
text-shadow 「文字の影付け」
text-shadowは、テキスト（文字に）に影を付ける場合に使用します。
文字に影を付けると、ちょっと目立つようになるため、表題やボタンなどに利用されることをお勧めします。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | する |
広告
text-shadowの指定方法
| 構文 | |
|---|---|
|
text-shadow : 横位置 縦位置 [ ぼかし幅 色 ]; |
|
| プロパティ | 意味 |
| text-shadow: 1px 2px 3px red; | 文字の影を以下のように指定 「横：1px」「縦：2px」「ぼかし：3px」「影色：赤」 |
| text-shadow: 1px 2px red; | 文字の影を以下のように指定 「横：1px」「縦：2px」「ぼかし：0」「影色：赤」 |
| text-shadow: 1px 2px; | 文字の影を以下のように指定 「横：1px」「縦：2px」「ぼかし：0」「影色：自動」 |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照 |
|
text-shadow のサンプル
| text-shadowの指定 | |||
|---|---|---|---|
| 横 (水平) |
3px
|
縦 (垂直) |
3px
|
| ぼかし |
3px
|
影色 |
#ff0000
|
Text Shadow
| 関連するCSS(STYLE) | |
|---|---|
| text-align | 横（水平）方向の文字位置 |
| text-decoration | 文字の装飾線の表示 |
| text-decoration-line | 文字の装飾線の位置を指定 |
| text-decoration-style | 文字の装飾線の種類を指定 |
| text-decoration-color | 文字の装飾線の色を指定 |
| text-emphasis | 圏点スタイルをまとめて指定 |
| text-emphasis-color | 圏点の色を指定 |
| text-emphasis-position | 圏点の位置を指定 |
| text-emphasis-style | 圏点の形を指定 |
| text-indent | １行目のインデント |
| text-justify | 両端揃えの調節方法 |
| text-overflow | オーバーフローしたテキストの省略表示 |
| text-transform | 字形の変換 |
| text-underline-position | 文字下線の位置を指定 |
| box-shadow | ボックスの影付け |
広告