ホームページ > 記事 > ウェブフロントエンド > CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)
CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)
- 易达オリジナル
- 2020-06-05 22:27:132768ブラウズ
この記事の目標:
1. text-shadow の使い方をマスターする
質問:
純粋な div CSS を使用して、次の効果を実現します
補足:
1. 文字は全部で 4 文字あります: Belive Yourself You Can
2. テキスト サイズは 86px
3. 右側のテキストと左側のテキストの間隔は 20px
4 です。画像のサイズと幅は 100px
5 です。水平方向の翻訳影のサイズは 15px、垂直方向の移動は 2、ぼかしは 20、色は #333333
です。具体的な操作は次のとおりです。マテリアルを保存するには、新しい画像ディレクトリを作成し、管理しやすいようにこのディレクトリに画像ファイルを保存します。マテリアルは
 "159136608582909CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)")
思考分析:
1. 構造は上部と下部に分かれており、上部には表示が表示されます。 2 つの英単語、1 つは Belive、もう 1 つは Yourself ですが、テキストにはシャドウ効果があります 2. 構造の下部も表示されます 2 つの英単語と絵、1 つの英単語は You ともう 1 つは Can で、テキストには影効果も必要です分析によると、次のコードが得られました<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>
</head>
<body>
<div class="container">
<div class="top">
<strong class="word">Belive</strong>
<strong class="word rword">Yourself</strong>
</div>
<div class="bottom">
<strong class="word">You</strong>
<strong class="word rword">Can</strong>
<img src="images/CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" / alt="CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" >
</div>
</div>
</body>
</html>
3. 書き方 、css ディレクトリを作成します、 CSS でのアイデア分析は次のとおりです。
アイデア分析:
1..container *アイデア分析1. コンテナ内のすべての要素の共通スタイルを設定するには、これらの共通コードを .container * style に書き込むことができます。そこで、次のコードをindex.cssに追加します。.container *{
padding:0;
margin:0;
} 2. .word textアイデア分析:1. 要件によると、テキスト サイズは 86px で、シャドウ効果があります。必要なシャドウに従ってtext-shadow の場合: 15px 2px 20px #333333;なので、index.css に次のようにコードを追加します.word{
font-size: 86px;
text-shadow: 15px 2px 20px #333333;
}3. の右側のテキストrwordアイデア分析:1. 要件によれば、右のテキストと左のテキストの間の距離は 20px であるため、margin-left:20px;So次のようにコードをindex.cssに追加します.rword{
margin-left:20px;
}4.画像設定
アイデア分析:
.bottom img{
margin-left:10px;
width:100px;
} これまでのところ、index.css の全体の内容は次のとおりです。 .container *{
padding:0;
margin:0;
}
.word{
font-size: 86px;
text-shadow: 15px 2px 20px #333333;
}
.rword{
margin-left:20px;
}
.bottom img{
margin-left:10px;
width:100px;
}次に、index.html にindex.css を導入します。#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="top">
<strong class="word">Belive</strong>
<strong class="word rword">Yourself</strong>
</div>
<div class="bottom">
<strong class="word">You</strong>
<strong class="word rword">Can</strong>
<img src="images/CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" / alt="CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)" >
</div>
</div>
</body>
</html>実行結果は次のとおりです。
これまでのところ、すべての要件を達成しました
以上がCSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。