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 マスタースレーブレプリケーションの実装手順

目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...

WeChatアプレットを使用して天井効果を実現する方法の例

目次1. 実装2. 問題点3. より良い実装方法があるかどうか検討する要約する背景は日付のタイトルで...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

MySQLの高可用性と高パフォーマンスのクラスタを構築する方法

目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...

JS 開発効率を上げる4つの超実践的なヒント

目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...

なぜ Tomcat が起動できないのでしょうか?

目次現象：ポートの使用:ファイルにスペルミスがあります:現象： Tomcat がインストールされ、W...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript（ES6オブジェクト指向）

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Vueルータールーティングの詳細な説明

目次1. 基本的な使い方2. 注意すべき点3. マルチレベルルーティング（マルチレベルルーティング）...

速度、読み込み、Web アプリケーションなどにおける div と table の違い。

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

Webフロントエンドのパフォーマンス最適化

ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...

Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

monaco-editor-vueの公式ソースコードは次のとおりです。インデックス 'mon...

MySQLデータベース設計：Pythonを使ったスキーマ操作方法の詳しい解説

矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

MySQLのロック機構に関する最も包括的な説明

目次序文グローバルロック完全なデータベース論理バックアップFTWRL と set global re...

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...