text-shadow プロパティとは何ですか? text-shadowプロパティの詳しい説明-CSSチュートリアル-php.cn

text-shadow プロパティとは何ですか? text-shadowプロパティの詳しい説明

云罗郡主

リリース： 2018-10-23 13:48:26

オリジナル

8033 人が閲覧しました

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プロパティの詳しい説明