1. ホーム
  2. Web制作
  3. HTML/Xhtml

CSS3 text-shadowプロパティの説明

2022-01-09 14:08:24

text-shadowプロパティには、以下の効果があります。

1.右下隅の陰影、左下隅の陰影、左上隅の陰影、右上隅の陰影

XML/HTMLコード コンテンツをクリップボードにコピーする
  1. >
  2. < html ラング = "en" >
  3. < ヘッド >
  4. < メタ 文字セット = "UTF-8" >
  5. < タイトル > テキストシャドウ < タイトル >
  6. < スタイル >
  7.         p{   
  8.           text-align:center。  
  9.           margin:0;   
  10.           font-family: helvetica,arial,sans-serif;   
  11.           color:#999。  
  12.           font-size:80px;   
  13.           font-weight:bold。  
  14.           text-shadow:10px 10px #333。  
  15.         }   
  16. < スタイル >
  17. < ヘッド >
  18. < ボディ >
  19. < p > テキストシャドウ < p >
  20. < ボディ >
  21. < html >

テキスト効果は

テキストシャドウを: text-shadow:-10px 10px #333 に変更すると、左下が影になります。

text-shadow を: text-shadow:-10px -10px #333 に変更すると、左上隅に表示されるようになります。

 text-shadow を text-shadow: 10px -10px #333 に変更すると、右上隅が表示されるようになります。

2. テキストシャドウを使って、立体的なテキスト効果を設定する

XML/HTMLコード コンテンツをクリップボードにコピーする
  1. >
  2. < html ラング = "en" >
  3. < ヘッド >
  4. < メタ 文字セット = "UTF-8" >
  5. < タイトル > テキストシャドウ < タイトル >
  6. < スタイル >
  7.          p{   
  8.            text-align:center。  
  9.            margin:0;   
  10.            font-family: helvetica,arial,sans-serif;   
  11.            color:#999。  
  12.            font-size:80px;   
  13.            font-weight:bold。  
  14.            text-shadow:-1px -1px #fff。  
  15.                                     1px 1px #333。  
  16.          }   
  17. < スタイル >
  18. < ヘッド >
  19. < ボディ >
  20. < p > テキストシャドウ < p >
  21. < ボディ >
  22. < html >

上記のCSS3 text-shadowプロパティの詳細は、私があなたと共有しているすべてです、私はそれがあなたに参照を与えることができる願っています、私はまた、あなたがスクリプトホームをサポートしています願っています。