CSS辞典 text-shadowプロパティの解説
文字の影を指定する「text-shadowプロパティ」の使用方法を記載
対応バージョン:CSS3/2.1
対応ブラウザ
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome](https://kcfran.com/wp-content/uploads/2022/05/crome_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox](https://kcfran.com/wp-content/uploads/2022/05/firefox_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari](https://kcfran.com/wp-content/uploads/2022/05/safari_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge](https://kcfran.com/wp-content/uploads/2022/05/msedge_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie](https://kcfran.com/wp-content/uploads/2022/05/msie_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera](https://kcfran.com/wp-content/uploads/2022/05/opera_icon.png)
初期値 | none |
適用される要素 | すべての要素 |
モジュール | CSS Text Decoration Module Level3及びLevel4 |
継承 | あり |
概要・使用方法
{ text-shadow: 長さ ぼかし半径 色;}
「text-shadowプロパティ」は、文字の影を指定します。複数の影を付けたい場合は(,)区切りで指定できます。複数の影は手前から奥に配置され、最初に指定した影が上にきます。
ながさ
none | 影を指定しません |
任意の数値+単位 | 影の長さを単位付きの数値で指定します。水平方向、垂直方向の値を半角スペースで区切って記述します。 |
ぼかし半径
任意の数値+単位 | 影のぼかし半径を単位付きの水内で指定します。水平方向、垂直方向の値を半角スペースで区切って記述します。 |
色
色 | 影の色をキーワードまたはカラーコードで指定します。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>text-shadowプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.sample0{text-shadow:red 0.2em 0.2em 0.1em;}
.sample1{text-shadow:red 0.2em 0.2em 0.1em,gray 0.5em 0.5em 0.5em}
</style>
</head>
<body>
<h1 class="sample0">ちりめんじゃこ</h1>
<h1 class="sample1">ちりめんじゃこ</h1>
</body>
</html>
ちりめんじゃこ
ちりめんじゃこ
chromeブラウザ実行結果
![chrome](https://kcfran.com/wp-content/uploads/2022/06/image-373.png)
Firefox ブラウザ実行結果
![Firefox](https://kcfran.com/wp-content/uploads/2022/06/image-374.png)
edgeブラウザ実行結果
![edge](https://kcfran.com/wp-content/uploads/2022/06/image-377.png)
operaブラウザ実行結果
![opera](https://kcfran.com/wp-content/uploads/2022/06/image-376.png)