（一）前言 工作中遇到需要实现一个视觉交互师的移动框，内容区域显示的内容，需要随这圆，边缘逐渐淡化，差不多类似如下效果 我尝试过使用渐变，过滤，内阴影都没办法处理，知道后面发现了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解决的方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格</title> <style> .content-view { width: 400px; height: 400px; border: 1px solid red; margin: auto; background: linear-gradient(to top, transparent 39px, blue 40px), linear-gradient(to left, transparent 39px, blue 40px) ; background-size: 40px 40px; } </style> </head> <body> <div class="content-view"></div> </body> </html>