（一）前言
工作中遇到需要实现一个视觉交互师的移动框，内容区域显示的内容，需要随这圆，边缘逐渐淡化，差不多类似如下效果
我尝试过使用渐变，过滤，内阴影都没办法处理，知道后面发现了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 用于指定元素的内容应如何与其直接父背景混合。
比如上面元，可以通过圆反转背景字体颜色颜色
（四）绘制表格
需求如下，类似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>
版权声明：本文为u010377383原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。