CSS3中的background、shadow、reflect、mask CSS3中的background、shadow、refle

CSS3中新增添了很多功能，这些功能大大的增添了css的效果，下面来总结下CSS3中的background、shadow、reflect、mask。
background：
CSS的background可以设置如下属性：
background-color
背景颜色；
值可以为英文（eg：pink），十六进制（eg：#ccc）或rgb（0255，0255，0~255）。
注：rgba（0255，0255，0255，01）；最后一个参数为透明度
background-position
背景图像的位置；
默认值是0% 0%；
值可以为left、top、right、bottom、center，也可以是百分比（eg：50%），也可以是具体值（eg：20px 50px）。
注：当为百分比或具体值时必须按照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引擎对渐变的实现参数，一共有五个：
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）；
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）；
第四个和第五个参数，分别是两个color-stop函数，color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色；
只有color时不需要处理兼容；
当有其他参数时需要加上处理兼容问题的前缀：-webkit；
径向渐变：

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

必须加上处理兼容的前缀：-webkit；
-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个：
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）；
径向渐变中还可以规定渐变的形状：circle（圆）、ellipse（椭圆）；
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）；
第四个和第五个参数，分别是两个color-stop函数，color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色；
重复渐变：

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；
还可以规定阴影方向：
box-shadow:x y 模糊度清晰度 color inset；
-webkit-box-reflect：
倒影