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デザイン

推薦する

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?

今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

Windows Server 2016 でサービスを展開する方法 (グラフィック チュートリアル)

導入インストールするシステムの数が多い場合、USB フラッシュ ドライブまたは CD を使用した手動...

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

MySQLクエリ書き換えプラグインの使用

クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...

MYSQLについては、データ型と操作テーブルを知る必要があります

データ型と操作データテーブル1.1 MySQL 型: 整数 1.2 MySQL データ型: 浮動小数...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

目次確認する：例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...

LinuxスレッドのPID（TID、LWP）を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...