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