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

推薦する

Win32 MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

Nginx Webサーバーのサンプルコードの設定方法の詳細な説明

概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...

MySQL データベースは SQL ステートメントを知っている必要があります (拡張バージョン)

拡張版です。質問とSQL文は以下の通りです。ユーザー テーブルを作成し、id、name、gender...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

ウェブページのフォント設定についての簡単な説明

サイト全体のフォントを設定することは、常にシンプルでありながら難しい作業です。深く掘り下げていくと、...

Visual Studio Code + Reactをベースに開発環境を構築するプロセス

開発環境ウィンドウ開発ツール Visual Studio Codeノードのインストールとnpm Wi...

Javascript で関数のカリー化とデカリー化を実装する方法

関数のカリー化（黒い疑問符の顔）？ ? ?カレー（黒い疑問符の顔）？ ? ?これは完璧な中国語翻訳で...

HTML におけるベースタグの使用に関する詳細な説明

requireJS には、baseURL というプロパティがあります。baseURL を設定すること...

MySQL トランザクションと分離レベルの基本原理の簡単な分析

目次序文1. 取引の基本原則の簡単な分析原子性:持続性分離：一貫性： 2. 分離レベルの基本原理の分...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...

モバイルウェブ画面適応（rem）

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...