CSS3のtext-shadow属性の使い方の詳しい説明:
以前、テキストの影効果を設定する場合、通常はPhotoshopを使用してレスポンシブ画像を作成するなど、他のツールが必要になります。 CSS を使用するだけでこれを実現できます。CSS3 では、text-shadow プロパティを使用して、以前は不可能だった効果を実現できます。
文法構造:
異なるチュートリアルでは、文法構造は異なる形式で書かれています。つまり、それらはすべて同じ意味を表すため、最も理解しやすいものを選択します:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
文法メモ:
1. : 影の色の値を表します。
2.x 軸: 水平オフセット、単位はピクセルです。
3.y 軸: 垂直方向のオフセット、単位はピクセルです。
4. ぼかし半径: 影の影響範囲。値が大きいほどぼやけます。
上記の文法構造のキーワード順序には 2 番目の形式もあります:
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
影の色は先頭または最後にあります。
コード例:
x 軸オフセットのデモ:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html> 上記のコードは、テキストの水平オフセットを 300px に、影の色を緑に設定できます。
Y 軸オフセットのデモ:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html> 上記のコードは、テキストの垂直オフセットを 60px に設定でき、影の色は緑です。
完全なコードのデモ:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>マルチレイヤーシャドウ:
いわゆるマルチレイヤーリファレンスは、カンマで区切ってテキストにシャドウスタイルを適用することです。
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>
次のセクション