文字の影を指定する「text-shadowプロパティ」の使用方法を記載
CSS3／2.1
対応ブラウザ
| 初期値 | 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 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント