CSS 3におけるbackground、shadow、reflect、mask

CSS 3には新たに多くの機能が追加され、これらの機能はcssの効果を大きく追加している.以下、CSS 3におけるbackground、shadow、reflect、maskをまとめる.
background:CSSのbackgroundは、次のプロパティを設定できます.
background-color背景色;
値は、英語(eg:pink)、16進数(eg:#ccc)、rgb(025505255、0~255)であってもよい.
注:rgba(0255052552255,01);最後のパラメータは透明度です
background-position背景画像の位置;
デフォルトは0%です.
値はleft、top、right、bottom、centerであってもよいし、パーセンテージ(eg:50%)であってもよいし、具体的な値(eg:20 px 50 px)であってもよい.
注意:パーセンテージまたは特定の値の場合、x yの順序で書く必要があります.
background-repeat背景画像が重複しているかどうか.
デフォルト値はrepeateです.
値は、repeat、repeat-x、repeat-y、no-repeat、inheritであってもよい.
background-originこの属性はbackground-positionが何に対して背景を固定するかを規定する.
デフォルト:padding-box;
値は、border-box(枠線ボックスに対して)、padding-box(内側余白に対して)、content-boxがコンテンツボックスに相当する場合があります.
background-sizeバックグラウンドのサイズ;
デフォルト:auto;
値はパーセントで、特定の値(width、height)、contain(最小を主とする)、cover(最大を主とする)です.
background-image背景画像;
値はurl()、none、inheritです.
background-attachment
固定された背景画像を設定する方法;
デフォルト:scroll;
値はscroll(背景図はページの残りの部分に従ってスクロール)、fixed(ページに固定)、inherit、
background-clipは背景の描画領域を規定する.
デフォルト:border-box;
値はborder-box、padding-box、content-boxです.
backgroundのグラデーション効果グラデーション効果では、線形グラデーション、ミラーグラデーション、繰返しグラデーションに分けることもできます.
直線グラデーション:

background:linear-gradient(red,blue);

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

-webkit-gradientはwebkitエンジンのグラデーションの実現パラメータで、全部で5つあります.
最初のパラメータは、linear(線形グラデーション)またはradial(半径方向グラデーション)のいずれかであるグラデーションタイプ(type)を表します.
2番目のパラメータと3番目のパラメータは、ランプの始点と終点をそれぞれ表す一対の値です.この値は座標形式で表すこともできるし、left top(左上隅)やleft bottom(左下角)などのキー値で表すこともできる.
4番目と5番目のパラメータは、それぞれ2つのcolor-stop関数であり、color-stop関数は2つのパラメータを受け入れ、1番目はグラデーションの位置を表し、0は起点であり、0.5は中点であり、1は終了点である.2番目はその点の色を表す.
カラーのみの場合、処理互換性は必要ありません.
他のパラメータがある場合は、互換性の問題を処理する接頭辞:-webkit;
放射状グラデーション:

background: -webkit-radial-gradient(50% 0,circle,deeppink,aqua,yellow);

互換性のある接頭辞を処理する必要があります:-webkit;
-webkit-gradientはwebkitエンジンのグラデーションの実現パラメータで、全部で5つあります.
最初のパラメータは、linear(線形グラデーション)またはradial(半径方向グラデーション)のいずれかであるグラデーションタイプ(type)を表します.
ラジアルランプでは、circle(円)、ellipse(楕円)、circle(円)、ellipse(楕円)、circle(円)、ellipse(楕円)、circle(円)、ellipse(楕円)、circle(円)、ellipse(楕円)、circle(円)、
2番目のパラメータと3番目のパラメータは、ランプの始点と終点をそれぞれ表す一対の値です.この値は座標形式で表すこともできるし、left top(左上隅)やleft bottom(左下角)などのキー値で表すこともできる.
4番目と5番目のパラメータは、それぞれ2つのcolor-stop関数であり、color-stop関数は2つのパラメータを受け入れ、1番目はグラデーションの位置を表し、0は起点であり、0.5は中点であり、1は終了点である.2番目はその点の色を表す.
繰り返しグラデーション:

background:-webkit-repeating-linear-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

background:-webkit-repeating-radial-gradient(left top,red 0,red 10%,blue 10%,blue 20%);

shadow:シャドウは文字シャドウとブロックシャドウを設定できます.
テキストシャドウ:text-shadow

p{

font-size: 40px;

text-shadow: 10px 10px 40px #0000FF;

color:#000;

-webkit-text-stroke: 1px  #FFC0CB;

}

text-shadow:x yぼかしcolor;
そのうち:-webkit-text-stroke:線幅線の色;文字の線を表す.
ブロックシャドウ:box-shadow

.div1{

background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);

box-shadow: 10px 10px 50px #FF1493,10px 15px 50px #FFFF00;

text-shadow:5px 6px 20px #666;

}

box-shadow:x yぼかしcolor;
box-shadow:x yファジイcolor、x yファジイcolor、x yファジイcolor、x yファジイcolor、x yファジイcolor、x yファジイcolor;
シャドウの方向を指定することもできます.
box-shadow:x yぼかし解像度color inset;
-webkit-box-reflect:バックグラウンド

-webkit-box-reflect:above 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,1));

below下向き
above下向き
left左
ライト右
10 pxピッチ
-webkit-mask:おぼろ版
-webkit-mask:url() no-repeat;