css3背景，蒙版，漸變
一、CSS3背景
1、背景原點控制（background-origin ：padding-box; (預設)）
border-box | padding-box | content-boxbackground-origin是用來決定圖片的原始起始位置
它有三個可選值content-box,padding- box,border-box，即可以選擇背景圖片是從內容區域或者內邊距或者邊框開始顯示。
2、背景剪下控制（background-clip ）
1).border-box | padding-box | content-boxclip原意為裁剪，擷取。
background-clip的作用為將背景圖片做適當的裁剪，以適應需要。
background-clip有content- box,padding-box,border-box三個值
剪裁方法：根據設定的盒子部位，那麼圖片在這個部位的外邊緣以外的部分都會不可見。
2).background-clip & background-origin
圖片起始位置是從border-box開始，但background-clip設定的值是content-box，在content之外，也就是border-box內，padding-box內的圖片內容將統統不可見。儘管圖片是從邊框開始顯示。
3、背景尺寸（background-size）
1).length： 長度值---第一個值設定寬度，第二個值設定高度2).percentage： 百分比---第一個值設定寬度，第二個值設定高度
3).cover：等比縮放到完全覆蓋容器，背景影象有可能超出容器
4).contain： 將背景影象等比縮放到寬度或高度與容器的寬度或高度相等，背景影象始終被包含在容器內。
4、透明背景（rgba）
background:rgba(255,0,0,0.6)
background-color:rgba(255,0,0,0.6); RGB Red Green Bule 3色!即255, 0, 0 三色的值混合.最後一個引數.0.6 則是指的透明度!1為100% 不透明!
二、漸變背景
1、漸變種類
線性漸變：linear-gradient徑向漸變 radial-gradient
2、語法：
漸變：background:-webkit-linear | radial-gradient (水平起點 垂直起點 || 角度, 顏色1 0%, 顏色2 漸變到的位置百分比%, ... ,顏色N 100%);
線性漸變&&徑向漸變
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
例如：
background:radial-gradient(at 55px 55px, #fff 1%,#000 100%);
background:-webkit-radial-gradient(50px 50px,#fff 1%,#000 100%);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
例如：background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);注：線上性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或著沿任何任意軸。
徑向漸變是圓形或橢圓形漸變。顏色不再沿著一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變複雜的多。
三、蒙版
1、蒙版知識點
1).可以使用圖片或漸變作為遮罩層
-webkit-mask-image:url | gradient-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content
簡寫：-webkit-mask:url("04.png") 40px 55px no-repeat;
目前只有webkit瀏覽器支援mask遮罩層
2、WEB中mask屬性特點
形狀主要控制的是顯示區域顏色對蒙版沒有任何的影響
透明度為顯示影象的透明度