ホームページ > 記事 > ウェブフロントエンド > CSS3 の Text-shadow はテキスト シャドウ効果を実装します (コード例)
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 サイトの他の関連記事を参照してください。