CSS辞典 text-shadowプロパティの解説

文字の影を指定する「text-shadowプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値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

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera