ホームページ > 記事 > ウェブフロントエンド > css3 text-shadow_html/css_WEB-ITnose
1. text-shadow
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影 垂直阴影 模糊半径 color;
h-shadow と v-shadow は負の値を取ることができますが、blur は正の値のみを取ることができます。
2. 使用する
<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>
<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. ぼかし効果
<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. ストロークエフェクト
<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. リソースリンクhttps://developer.mozilla. org/en-US/docs/Web/CSS/text-shadow