CSS3実践手法のまとめ(推奨)

CSS3実践手法のまとめ(推奨)

1. 丸い境界線:

CSSコードコンテンツをクリップボードにコピー
  1. 境界線の半径: 4px ;

2.ボックスシャドウ:

CSSコードコンテンツをクリップボードにコピー
  1. ボックスシャドウ: 5px   5ピクセル  3ピクセル  #000 ; /* パラメータは右方向の拡大距離、下方向の拡大距離、影の幅、色です*/   

3. 背景画像のサイズ:

CSSコードコンテンツをクリップボードにコピー
  1. div{
  2. 背景: url (bg_flower.gif);
  3. -moz-背景-サイズ: 63px   100px ; /* Firefox の古いバージョン */   
  4. 背景-サイズ: 63px   100ピクセル;
  5. 背景繰り返し:繰り返しなし;
  6. }

4. 背景画像の場所

CSSコードコンテンツをクリップボードにコピー
  1. div{
  2. 背景: url (bg_flower.gif);
  3. 背景繰り返し:繰り返しなし;
  4. 背景-サイズ: 100% 100%;
  5. -webkit-背景-origin:コンテンツ-box; /* Safari */   
  6. 背景-origin:コンテンツ-box; /*境界ボックス、パディングボックス*/   
  7. }

5. テキストシャドウ

CSSコードコンテンツをクリップボードにコピー
  1. テキストシャドウ: 5px   5ピクセル  3ピクセル  #000 ; /*パラメータは右方向の拡張距離、下方向の拡張距離、影の幅、色です */   

6. 自動行折り返しを強制する

CSSコードコンテンツをクリップボードにコピー
  1. p {
  2. 単語折り返し:単語区切り;
  3. }

7. コラム

CSSコードコンテンツをクリップボードにコピー
  1. div{
  2. column-gap: 3px ; /* 列間の間隔の長さ */   
  3. -moz-列数:3; /* Firefox */   
  4. -webkit-column-count:3; /* Safari と Chrome */   
  5. 列数:3;
  6. }

以上がCSS3実践方法(推奨)のまとめです。編集部が皆さんにシェアする内容は以上です。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522362.html

<<:  HTMLで境界線を設定する3つの方法の詳細な説明

>>:  Linux システムの .bash_profile ファイルの詳細な説明

推薦する

MySQL 5.7 の sql_mode のデフォルト値によって生じる落とし穴と解決策

通常のプロジェクト開発中に、MySQL バージョンが 5.6 から 5.7 にアップグレードされた場...

Vue+ElementUI はページング関数を実装します - mysql データ

目次1. 問題2. 解決策2.1 ページングコンポーネント2.2 データベースデータを取得する関数:...

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

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

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

Javascript クロージャの使用シナリオの原則の詳細

目次1. 終了2. クロージャの使用シナリオ1.タイムアウトを設定する2. コールバック3. 手ぶれ...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

CSS マスクを使用して PNG 画像のサイズを大幅に最適化します (推奨)

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...

JS 日付コントロール My97DatePicker の基本的な使い方

My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。...

Linux inotifyリアルタイムバックアップの実装方法の詳細説明

リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...

Windows Server 2016 に Docker をインストールする方法

最近、Microsoft は Docker をネイティブにサポートする Windows Server...

MySQL インストール プロンプト「詳細なヘルプについては NET HELPMSG 3534 と入力してください」の解決方法

今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...