ホームページ > 記事 > ウェブフロントエンド > CSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】
CSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】
- 藏色散人オリジナル
- 2018-09-05 13:49:092700ブラウズ
CSS を初めて使用する初心者にとって、テキスト シャドウという言葉は少し聞き慣れないかもしれません。言い換えれば、立体感のあるテキストと言い換えることができます。いくつかの絵がすぐに頭に浮かびますか?以前の記事 [css3 で影効果を作成する方法の詳細な説明] を読んでいる場合は、div 影効果についてある程度理解しているはずです。この主な属性は box-shadow スタイル属性です。
それでは、この記事では CSS3 でテキストの影効果を作成する方法、つまり 3D フォントを作成する方法を引き続き紹介します。ここでマスターする必要がある主な属性は、text-shadow スタイル属性です。初心者の中には「text-shadow とは何ですか?」と尋ねる人もいるかもしれません。どのような意味です？使い方？以下で具体的なサンプルコードを使って詳しく説明しますので、ご安心ください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 text-shadow属性使用示例</title>
<style>
.t1{
text-shadow: 5px 5px 5px #029789;
font-size: 40px;
font-weight: bold;
color: white;
}
.t2{
text-shadow: -5px -5px 5px #1094f2;
font-size: 40px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div class="demo">
<p class="t1">text-shadow属性使用示例1-文字阴影效果</p>
<p class="t2">text-shadow属性使用示例2-文字阴影效果</p>
</div>
</body>
</html>上記のコードにブラウザからアクセスすると、次のような効果が得られます。
css text-shadow属性の使い方、つまりフォントに3D効果を持たせる方法の詳しい紹介です。一定の参考価値はありますので、困っている友人のお役に立てれば幸いです。
以上がCSS3テキストシャドウ効果を実現するにはどうすればよいですか? 【詳しいコード説明】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。