ホームページ > 記事 > ウェブフロントエンド > text-shadow プロパティとは何ですか? text-shadowプロパティの詳しい説明
text-shadow プロパティとは何ですか? text-shadowプロパティの詳しい説明
- 云罗郡主オリジナル
- 2018-10-23 13:47:347998ブラウズ
CSS を学習した後、アーティストの場合、CSS の text-shadow タグを使用してシャドウ効果を実現したいと考えます。 . 次に、テキストシャドウ text-shadow プロパティとは何ですか?以下に text-shadow プロパティをまとめてみましょう。
text-shadow 属性の構文
text-shadow:x-offset y-offset blur color;
上記のコードの詳細な説明:
x-offset は水平方向のシャドウを表し、水平方向のオフセット位置を表し、単位はx-offset パーセントで表すこともできる x-offset の値が正の場合、表示される影が右に移動することを意味します。影が左に移動すること。
y オフセットの単位は、y オフセットが負の値の場合、上向きのシフトを意味します。 、上方へのシフトを意味します。
Blur は影のぼかしの程度を表しますが、最も重要な点は、負の値は存在せず、正の値のみであるということです。ぼかしの値が大きいほどぼやけ、小さいほどぼやけます。より明確になります。ブラーを設定したくない場合は、ブラーを 0 に設定し、
color は影の色を表します。
具体例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-shadow属性</title>
<style type="text/css">
#lvye
{
font-size:40px;
text-shadow:4px 4px 2px gray;
-webkit-text-shadow: 4px 4px 2px gray;
-moz-text-shadow: 4px 4px 2px gray;
}
</style>
</head>
<body>
<div id="lvye">php中文网</div>
</body>
</html>ブラウザに表示される上記のコードの効果は次のとおりです:
上記は影ですテキストの text-shadow プロパティは何ですか? text-shadow 属性の詳細な説明を完全に紹介します。CSS ビデオ チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。
以上がtext-shadow プロパティとは何ですか? text-shadowプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。