CSS3新属性 蒙版 Mask属性, 剪切文本以及用CSS绘制表格

（一）前言
工作中遇到需要实现一个视觉交互师的移动框，内容区域显示的内容，需要随这圆，边缘逐渐淡化，差不多类似如下效果

我尝试过使用渐变，过滤，内阴影都没办法处理，知道后面发现了mask，才得以解决这个问题， 所以现在将基本属性整理下

（二）CSS mask语法

语法：

-webkit-mask-image:url(circle.svg);

和background的样式语法是一样的，蒙版的alpha设置为0那后面的图片也不见了，设置为1才是可见。

还可以设置渐变:

-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));

可以用渐变来代替图片做蒙版，都可以的。

也可以设置边框遮罩，语法：

-webkit-mask-box-image:url(m1.png) 0 round;

具体的语法：

https://www.w3.org/TR/2012/WD-css-masking-20121115/#the-mask-image

（三）剪切文本

mix-blend-mode 用于指定元素的内容应如何与其直接父背景混合。

比如上面元，可以通过圆反转背景字体颜色颜色

https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

（四）绘制表格
需求如下，类似PS的表格

其实解决方案有很多，比如canvas，背景图平铺，但是这里要解释一种css解决的方案