css3 text-shadow_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 text-shadow_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:30

オリジナル

1593 人が閲覧しました

1. text-shadow

text-shadow: h-shadow v-shadow blur color;

ログイン後にコピー

text-shadow: 水平阴影 垂直阴影 模糊半径 color;

ログイン後にコピー

h-shadow と v-shadow は負の値を取ることができますが、blur は正の値のみを取ることができます。

2. 使用する

1. 基本

<style type="text/css">.blur{  text-shadow:0 0 5px red;/*阴影无偏移*/}.vh{  text-shadow:1px 1px 0 red; /*阴影偏移1px 1px*/}.white{  color: white;  text-shadow:2px 2px 4px black;}</style><body><h1 class="blur">霓虹灯效果的文本阴影</h1><h1 class="vh">文本水平垂直阴影效果</h1><h1 class="white">白色文本阴影效果</h1></body>

ログイン後にコピー

2. レリーフ効果を使用します。テクスチャを増やすには、ぼかし値を 0 に設定する必要があります。

<style type="text/css">.relief{  color: #ccc;  text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}</style><body><h1 class="relief">浮雕效果</h1></body>

ログイン後にコピー

3. ぼかし効果

ぼかし効果を作成するには text-shadow を使用します。注: ぼかし値を大きくすると、効果がぼやけます。。

<style type="text/css">.relief{/*  color: #ccc;*/color: transparent;   text-shadow: 0 0 5px #f96;}</style><body><h1 class="relief">模糊效果</h1></body>

ログイン後にコピー

4. 凹面効果

注: テキストの前景色は背景色よりも暗く、影の色は背景色よりもわずかに明るくなります。影の色が明るすぎると表示されてしまいますが、暗すぎると効果がありません。

インセット効果はテキストに影を付ける効果で、これも一般的な効果で、微妙なハイライト効果を与えます。

<style type="text/css">.inset{ color: #566F89;  background: #C5DFF8;  text-shadow: 1px 1px 0 #E4F1FF;}</style><body><h1 class="inset">内凹效果</h1></body>

ログイン後にコピー

5. ストロークエフェクト

原則: ぼかし値なしで、左上と右下の 2 つのシャドウを使用します。

<style type="text/css">.stroke{  background-color: #666666;color: #fff;  text-shadow: 1px 1px 0 #f96,-1px -1px 0 #f96; }</style><body><h1 class="stroke">描边效果</h1></body>

ログイン後にコピー

6. 3D 効果

3D テキスト効果の使用原理は、Photoshop と同じで、テキストの下または上に複数のレイヤーをコピーし、各レイヤーを 1 ピクセルの距離で左上または右下に移動します。 3D 効果を作成します。同時に、層が増えるほど厚くなります。 text-shadow を使用する代わりに、複数のシャドウを使用し、そのシャドウの色を同じ色に設定する必要があります。RGBA カラーを使用すると、より良い効果が得られます。 3. リソースリンク