css3の新しい背景属性：
背景- 画像の 背景 - サイズの 背景 - 元の 背景 - クリップ
背景画像
css3では、background-imageプロパティを使用して背景画像を追加できます。異なる背景画像と画像はカンマで区切られており、すべての写真の一番上の画像が最初の画像です。
画像ごとに異なる属性を設定できます。
＃example1 { background - image：url（img_flwr.gif）、url（paper.gif）; 背景 - 位置：右下、左上; background -repeat：no- repeat、repeat; }
次のように書くこともできます：
＃example1 { background -image：url（img_flwr.gif）right bottom no- repeat、url（paper.gif）left top repeat; }
背景サイズ
背景画像のサイズを指定します。css3で背景画像を指定できます。さまざまな環境で背景画像のサイズを再度指定してみましょう。ピクセルサイズまたはパーセンテージサイズを指定できます。指定されたサイズは、親要素の幅に相対的であり、
高さのパーセンテージのサイズ。
構文：
background-size：length | percentage | cover | contain;
length：背景画像の高さと幅を設定します。最初の値は幅を設定し、2番目の値は高さを設定します。
パーセンテージ：背景画像の幅と高さを親要素のパーセンテージとして設定します。
カバー：背景画像を拡大して、背景画像が背景領域を完全に覆うようにします。背景画像の特定の部分は、背景の配置領域に表示することもできません。
含む：幅と高さがコンテンツ領域に完全に適合するように、背景画像を最大サイズに拡張します。
background-size：contains; //要素のサイズに合うように画像を縮小します（ピクセルのアスペクト比を維持します）;
background-size：cover; //要素を埋めるように画像を拡大します（ピクセルのアスペクト比を維持します）;
background-size ：100px 100px; //指定したサイズに画像を調整します;
background-size：50％100％; //指定したサイズに画像を調整します。パーセンテージは、含まれている要素のサイズに相対的です。
background-origin
background-origin属性は、背景画像の位置領域を指定します。コンテンツボックスパディングボックスボーダーボックス
背景クリップ
background-clip background clippingプロパティは、指定された位置から描画されます。
content-box（コンテンツの外側の背景部分を切り取る手段）padding-box（パディングの外側の背景部分を切り取る手段）
ボーダーボックステキスト（ボーダー以外の背景部分を切り取ることを意味するため、最終的な効果は図1と同じです。つまり、ボーダーボックスはbackground-clipのデフォルトのプロパティ値です）
background-originとbackground-clipの違い：
background-originは背景画像のレンダリングを開始する位置を指定し、background-clipは単に背景画像を大まかに切り取ります。
background-clip：テキスト（テキストアウトラインの外側の背景部分が切り取られ、テキストアウトラインの内側の部分のみが残ることを意味します。この時点では、テキストを透明色に設定して、テキストを通してボックスの背景色を表示するだけです）
background-clip：テキスト、現在はwebkitプレフィックスを追加する必要があります
css3テキスト効果
テキストシャドウ
text-overflow：クリップ|省略記号|文字列;クリップ：トリミングされたテキスト、デフォルト。省略記号：トリミングされたテキストは省略記号を表示します。文字列：指定された文字列を使用して、トリミングされたテキストを表します（現在はFirefoxでのみサポートされています）。
ワードラップワードが長すぎる場合は、特定の領域を超える可能性があります。ワードラップ属性を使用すると、テキストでテキストを強制的に折り返すことができます。つまり、ワードが分割されます;通常|ブレークワード
word-break属性は自動改行の処理方法を指定します。word-break属性を使用することにより、ブラウザは任意の位置で改行を実現できます。ノーマル|キープオール|ブレイクオール
上記の栗の設定を比較しますword-break：break-all;およびword-wrap：break-word
要約：
word-break：単語を行末に配置できない場合は、単語内に配置する方法を決定します=>単語を文末に配置できない場合に単語を折り返すかどうかを決定します
break-all：強制的に配置し、残りを次の行に置き換えます。
keep-all：置けない場合は別行に表示され、置けない場合はオーバーフローします。
ワードラップ：行の終わりを下に置くことができない場合、ワードで改行を許可するかどうかを決定する=>行のラップ方法を決定する
通常：単語が長すぎて新しい行に表示され、1行を超えるとオーバーフローします。
break-word：単語が長すぎる場合は、最初に改行してみてください。それでも長すぎる場合は、改行できます。
リファレンス：https : //www.cnblogs.com/breezeljm/p/5728129.html