今回は、CSS3のtext-shadowtext-shadowプロパティの使い方と、CSS3のtext-shadow text-shadowを使用する際の注意事項を紹介します。見て。
Text-shadow 属性の特殊効果:
1. 右下隅の影、左下隅の影、左上隅の影、右上隅の影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>text-shadow を次のように変更すると: text-shadow:-10px 10px #333, 左下隅の影が表示されます
text-shadow を text-shadow:-10px -10px に変更します #333, 左上隅の影が表示されます
text-shadow を text-shadow:-10px -10px に変更します-shadow: 10px -10px #333 、右上隅に影が表示されます
2. text-shadow を使用して 3 次元のテキスト効果を設定します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>これらの事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。
関連書籍:
以上がCSS3のtext-shadowプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
