CSS3 テキストシャドウ text-shadow プロパティの詳細な説明

CSS3 テキストシャドウ text-shadow プロパティの詳細な説明

テキストシャドウ text-shadow プロパティの効果:

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル>テキストシャドウ</タイトル>   
  6.      <スタイル>   
  7. p{
  8. テキスト配置:中央;
  9. マージン:0;
  10. フォントファミリー: helvetica、arial、sans-serif;
  11. 色:#999;
  12. フォントサイズ:80px;
  13. フォントの太さ:太字;
  14. テキストシャドウ:10px 10px #333;
  15. }
  16.      </スタイル>   
  17. </ヘッド>   
  18. <本文>   
  19.      < p >テキストシャドウ</ p >   
  20. </本文>   
  21. </html>​​   

テキスト効果は次のとおりです。

text-shadow を text-shadow:-10px 10px #333 に変更すると、左下隅に影が表示されます。

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

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

2. テキストシャドウを使用して3Dテキスト効果を作成する

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2.   < html   lang = "ja" >   
  3.   <ヘッド>   
  4.       <メタ 文字セット= "UTF-8" >   
  5.       <タイトル>テキストシャドウ</タイトル>   
  6.       <スタイル>   
  7. p{
  8. テキスト配置:中央;
  9. マージン:0;
  10. フォントファミリー: helvetica、arial、sans-serif;
  11. 色:#999;
  12. フォントサイズ:80px;
  13. フォントの太さ:太字;
  14. テキストシャドウ:-1px -1px #fff,
  15. 1ピクセル 1ピクセル #333;
  16. }
  17.       </スタイル>   
  18.   </ヘッド>   
  19.   <本文>   
  20.       < p >テキストシャドウ</ p >   
  21.   </本文>   
  22.   </html>​​   

CSS3 テキストシャドウ text-shadow プロパティの詳細な説明は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Dockerコンテナを介してランプアーキテクチャを構築するプロセス

>>:  2013年のウェブデザインUIの最もホットなトレンド最も人気のあるUIデザイン

推薦する

Javascriptの基本を詳しく説明

目次変数データ型拡張ポイント要約する変数基本的な構文 var age=10; //ageという変数を...

Alibaba Cloud ESC サーバー シングルノード MySQL の Docker デプロイメント

1. msyqlの高速バージョンをダウンロードする docker pull hub.c.163.co...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

CSS3は、Transformを使用して動く2D時計を作成します。

これでtransformコースは終了です。例を見てみましょう。transform transform...

主キーを追加または変更するMySQL SQL文操作

テーブルフィールドを追加する テーブルtable1を変更し、トランザクタvarchar(10)をNu...

VMware ESXi CLI の一般的なコマンドを調べる

目次【共通コマンド】 [一般的な esxi コマンドの概要] [esxcli コマンドの調査] ES...

Vueはグラフィック検証コードを実装する

この記事の例では、グラフィック検証コードを実装するためのVueの具体的なコードを参考までに共有してい...

MySQLの共通関数の概要

序文： MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...

Linux ログ表示方法 6 つのまとめ

バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...

最高の無料英語フォント33選を紹介

チャンクファイブフリータイプファミリーCuprum JAH I フリーフォントイェセヴァブークレフィ...

SSHを使用してDockerサーバーに接続する方法

初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...

スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...

MySQL 文字セットの変更に関する実践的なチュートリアル

序文： MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...

Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...