CSS3学习笔记：蒙版 倒影 hsla模式 效果
最近才知道 ⊙ω⊙ css3还可以有ps的蒙版 倒影 hsla模式 效果顿时感觉css3很强大啊！
css3以前就知道有动画属性，现在知道有了css3有蒙版 倒影 hsla模式 终于不不用为了就几张图的效果
打开那个麻烦的ps修图，然后又要重新上传一次图太麻烦。
由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用蒙版 倒影 hsla模式需要添加-webkit和前缀
一.蒙版
text
-webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版;
-webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y;
-webkit-mask-position: center;//定位居中
二.倒影
text
-webkit-box-reflect: 方向 偏移量 图片效果;
方向
none:此值为box-reflect默认值，表示无倒影效果；
above:表示生成的倒影在对象（原图）的上方；
below:表示生成的倒影在对象（原图）的下方；
left:表示生成的倒影在对象(原图)的左侧；
right:表示生成的倒影在对象(原图)的右侧；
偏移量：就是两张图片的间距
图片效果
渐变色(Gradients)
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
色彩平衡（color-stop）
·靠右和向下（调了opacity属性）·
三.hsla模式
hsla主要用于色彩部分背景色用的比较多
text
css background: hsla(h,s,l,a);
h: 色调，取值范围0~360
s: 饱和度，取值范围0%~100%
l: 亮度，取值范围0%~100%
a: 透明度，取值范围0~1