这些css属性在web前端开发中虽然用的比较少，但是还是非常实用。
      一、-webkit-mask
      -webkit-mask让为一个元素添加蒙板成为可能，从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、-webkit-mask-position和-webkit-mask-repeat等，严重依赖来自于background中的语法。
      图片蒙板:
      .element{
      background:url(img/image.jpg)repeat;
      -webkit-mask:url(img/mask.png);
      }
      渐变蒙板:
      .element2{
      background:url(img/image.jpg)repeat;
      -webkit-mask:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
      二、-webkit-text-stroke
      CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color:transparent属性，你还可以创建镂空的字体！
      创建红色镂空字体：
      dsdjsd
      三、-webkit-margin-collapse
      这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。
      最常见的例子就是两个相邻的
      元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。
      四、text-overflow
      或许你会常常遇到这个问题：某个容器对于其内的文字来说太小了，然后你不得不用javascript来截断字符串并添加”…”符号以避免文字溢出。
      忘掉它吧！采用CSS3和text-overflow:ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，但是貌似在最近的版本中将会提供支持。