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

css辞典 CSS辞典
この記事は約3分で読めます。

文字の影を指定する「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 実行サンプル

text-shadowプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

text-shadowプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

text-shadowプロパティのedgeブラウザの実行結果

opera 実行サンプル

text-shadowプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました