-webkit- mask这个属性的作用如果熟悉Flash的话就知道有个“遮罩层”的东西，也就是如果根据遮罩层的颜色的深浅来显示位于遮罩层下方的图像，在这里的 话，-webkit-mask是采用opacity透明度来实现遮罩的，如果透明度为1则显示，透明度为0则不显示，介于0-1之间则呈现相应的透明度
-webkit-mask也是一个复合属性，语法如下：
-webkit-mask:attachment, clip, origin, image, repeat, composite, box-image;
也就是说这个属性可以分解成如下的几个属性：
（1）-webkit-mask-attachment 设置遮罩图片是否随页面滚动
【语法】：-webkit-mask-attachment: fixed | scroll
fixed表示图片不随页面滚动，scroll则表示图片随页面滚动，但是很不幸没有测试成功，API上倒是
提了一句说是Apple Extension，原以为是iphone上的safari才可以显示，但是用ipod测试了一下也没有看
到效果。还有待研究
（2）-webkit-mask-clip 关于这个属性，safari的API也没有做太多的解释，只是说用于阐述mask的效果是否扩展到
边框上，但是对于这个属性的值没有过多的介绍。很遗憾！
（3）-webkit-mask-origin 设置遮罩的位置 ，这个属性决定了-webkit-mask-position的起点，
有三个值padding border content
【语法】-webkit-mask-origin: padding | border | content
padding ---- mask的位置从元素padding的左上角开始
border-------mask的位置从元素的border的左上角开始
content------mask的位置从元素的实际内容的左上角开始
（4）-webkit-mask-image 设置用于遮罩的图片
【语法】-webkit-mask-image:url;
（5）-webkit-mask-repeat 设置遮罩的方式
【语法】-webkit-mask-repeat: stretch(默认) | round | repeat
（6）-webkit-mask-composite 设置遮罩的混合模式
【语法】-webkit-mask-composite: border(默认) | padding
border ----表示背景会延伸到边跨区域
padding---表示背景只会延伸到padding区域
（7）-webkit-mask-box-image 该属性的作用有点像拼图的作用，举一个例子说明。
【语法】：-webkit-mask-box-image：url top right bottom left x-repeat y-repeat;
【参数】:url 表示使用的图片
top right bottom left 分别表示的是针对url里图片的裁切位置，可以为像素（为像素时不能带px单位）和百
分比，而且这个属性设置和平时设置的不一样，如果top right bottom left中没有设置值的就默认为0像素
如果接触过CSS3里的border-image就可以比较容易的理解这个属性的用法了，但是
-webkit-mask-box-image这个属性的用法 其实又是有点区别的。举一个例子来描述
3.jpg
soul.png(这是一张具有透明背景的图片)
效果如图
top是指从上到下的切取，right为从右往做切取，bottom为从下往上切取，left为从左向右切取，这样就会导致四个角的部分会出现重复的部分，而不是像border-image那样分成没有重复区域的九宫格
根
据图示，用于遮罩的图片就是以九宫格的形式来截取的，四个角top-left,top-right,bottom-left,bottom-right不
变，top、right、bottom、left四边根据设置的x-repeat，y-repeat的设置进行平铺，重复或者拉伸，中间区域（）
x-repeat y-repeat 表示的是x方向 y方向的图片呈现方式（repeat stretch round 默认为stretch）
.k-invalid-msg .k-warning{
-webkit-mask-box-image:none;
-webkit-mask-image:url("styles/images/searchinput.png");
-webkit-mask-size:auto 100%;
-webkit-mask-position-x:10%;
}
.k-invalid-msg .k-icon{
height: 18px;
width:18px;
background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#BCE4FF),color-stop(0.5,#3F99D2),color-stop(1,#53BFE5));
}