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 ファイルの詳細な説明

推薦する

FileZilla を使用して FTP ファイル サービスを素早く構築する方法

ファイルの保存とアクセスを容易にするために、FTPサービスが特別に構築されています。 FTP サーバ...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

MySQLはbinlogを通じてデータを復元する

目次MySQL ログファイルバイナリログBinlogログがオンになっていますログ記録を有効にする方法...

Linux インストール Redis 実装プロセスとエラー解決

今日、redis をインストールしたところ、今までになかったいくつかのエラーが発生しました。ここで記...

Linux でソースインストールされたパッケージを簡単に削除する方法

ステップ1: Stowをインストールするこの例では CentOS を使用しているため、拡張 EPEL...

Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図

1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...

MySQLのインデックスシステムがB+ツリーを使用する理由の分析

目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

WeChatアプレットは固定ヘッダーとリストテーブルコンポーネントを実装します

目次必要:機能ポイントレンダリング実装のアイデア具体的なコード(react\taro3.0)特定のコ...

nginx.conf ファイルの構文強調表示とフォーマット設定には nginx.vim ツールを使用します。

私はtengineを使用しています。インストールディレクトリは/usr/local/tengineで...

Docker ファイルの保存パス、コンテナの起動コマンド操作の取得

コンテナはすでに作成されていますが、その起動パラメータ(データがマウントされる場所)を知る方法 #コ...

キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...

ElementUIはel-formフォームリセット機能ボタンを実装します

目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...