CSS3--背景颜色的渐变效果

一、渐变：gradients

　　线性渐变（linear gradients）

　　　　background:-webkit-linear-gradient(90deg,red 10%,blue);

　　　　　　1、需要有内核前缀

　　　　　　2、方向可以为字母或者角度（left top right bottom）

　　　　　　3、为角度时逆时针旋转

　　　　　　4、颜色值数量不限

　　径向渐变（radial gradients）

　　　　background:-webkit-radial-gradient(90deg,red 10%,blue);

　　　　　　1、不接受角度参数

　　　　　　2、默认为center

二、倒影：box-reflect

　　　　-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0)20%,rgba(0,0,0,1));

　　　　　　参数：方向（above，below，left，right），距离，渐变

　　background-size 背景尺寸设置  px  %

三、背景裁切：

　　background-clip

　　　　border-box丨padding-box丨content-box

四、背景起点位置：background-origin

　　　　border-box丨padding-box丨content-box

五、背景蒙板：-webkit-mask

　　-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