CSS3のtext-shadowスタイルは、元々CSS2に存在した属性をCSS3のテキストシャドウに適用するものなので、text-shadowの使い方を見てみましょう。
CSS3単語:
text-shadow
文法構造
div{text-shadow:5px 2px 6px #000;}
divボックスのテキストシャドウ効果を左から5px、上から2pxに設定します影効果の表示を開始するには、影のサイズ範囲を 6px に、影の色を黒 (#000) に設定します。
テキスト表示の影効果には4つの値があります。最初の値は影効果の表示を開始する左からの距離を表し、2番目の値は影効果の表示を開始する左からの距離を表します。は影の範囲のサイズを表し、4 番目の値は影効果の色です。
ケース HTML コード
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>字体阴影 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>我阴影文字</div> <div class="txt">文字阴影测试内容1</div> <div class="txt2">文字阴影测试内容2</div> </body> </html>
対応する CSS コード:
.txt {text-shadow:5px 1px 6px #F93 }
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}上記は、CSS3 での text-shadow の使用方法です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注意ください。
関連記事:
以上がCSS3 text-shadow フォントシャドウの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
