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

推薦する

VMware での Ubuntu 16.04 イメージの完全インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04イメージのインストールチュートリアルを参...

VMware Workstation に Windows Server 2019 をインストールする (グラフィック チュートリアル)

キーの入力を求められた場合は、[キーがありません]を選択します。デスクトップエクスペリエンスを選択す...

背景とリンクとして画像を書き込む方法（背景画像＋リンク）

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

HTMLページが3秒後に自動的にジャンプする3つの一般的な方法

実際には、N 秒後にページを自動的にジャンプさせるにはどうすればよいかという問題によく遭遇します。私...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

VUE ユニアプリカスタムコンポーネントについての簡単な説明

1. 親コンポーネントはpropsを通じて子コンポーネントにデータを渡すことができる2. 子コンポー...

HTML ボディタグと HTML でよく使われる制御タグの詳細な説明

1. <body> タグ: Web ページの本体をマークするために使用されます。body...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

MySQLはSQL文を使用してテーブル名を変更します

MySQL では、SQL ステートメント rename table を使用してテーブル名を変更できま...

JavaScript マクロタスクとマイクロタスク

マクロタスクとマイクロタスクJavaScript はシングルスレッド言語です (マルチスレッドの場合...

jQueryはフォーム検証機能を実装します

jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...