熟练使用CSS搭建一个渐变色二维码

.g-container{位置：相对；宽度：200px；高度：200px；&::之前{内容：“”；位置：绝对；顶部：0；左：0；底部：0；右：0；背景：线性渐变（45deg，#673ab7，#ff5722）；混合混合模式：变亮；}}这里，我们使用父元素的伪元素保存了一个标签，作为渐变层使用。我为实际的叠加效果做了一个动画：这样我们就可以通过混合模式将一个黑色的二维码图片变成渐变色。二维码中间镂空当然，这还没有结束。有时候，我们的二维码中间会出现一些图案，比如圆形或者方形的图片。如果使用上面的方法，会有一些瑕疵：然后，我们还需要根据二维码的样式，将渐变图案的中间挖空！有趣的是，二维码中间的图案也会有圆形和矩形两种。对于这两个二维码的处理方式不同。渐变图案中央镂空一个圆圈。对于中心图案为圆形的二维码，我们只需要实现这样的渐变，然后叠加即可：这个比较简单。由于本来就是线性渐变，中间需要挖空一个圆圈。最好的方法是使用mask:div{background:linear-gradient(45deg,rgb(51,102,153),rgb(255,0,204));mask:radial-gradient(rgba(0,0,0,0),rgba(0,0,0,0)16%,rgb(0,0,0)16%);}在矩形中挖空一个矩形渐变图案的中心。但是，对于中间的一个矩形，不好处理现在，我们需要实现这样一个基于渐变图案的图形：其实有很多方法，比如我们把中间的透明部分想象成的内容部分一个div，周围的渐变色区域为边框区域。当然我这里使用了clip-path，实现空心矩形也很方便：div{background:linear-gradient(45deg,rgb(51,102,153),rgb(255,0,204));剪辑路径：多边形（0%0%，0%100%，34%100%，34%34%，66%34%，66%66%，34%66%，34%100%，100%100%,100%0%);}制作二维码着色工具基于以上知识，我们可以简单的搭建一个渐变色二维码工具。这里我简单实现了一个：我们上传一个普通二维码，自定义渐变色，选择是否镂空，镂空的类型和大小，快速创建一个渐变色二维码。简单演示一下：一个以CSS为核心的小工具就完成了。完整代码可以点击这里：CodePen-MakeAGradientQrCode[1]最后总结一下，本文介绍了使用CSS混合模式获取渐变二维码的tricks，使用mask或者clip-path镂空出渐变图形。一些相关知识点如果你还有疑惑，推荐你阅读以下文章：不可思议的混合模式mix-blend-mode[2]不可思议的混合模式background-blend-mode[3]两行CSS代码实现的着色技术图片任意颜色[4]精彩CSSMASK[5]巧用CSS实现彩色三角边框动画[6]好了，本文到此结束，希望对你有所帮助！参考资料[1]CodePen-制作渐变二维码：https://codepen.io/Chokcoco/pen/XWzPEXW。[2]令人难以置信的混合模式mix-blend-mode：https://github.com/chokcoco/iCSS/issues/16.[3]难以置信的混合模式background-blend-mode：https://github.com/chokcoco/iCSS/issues/31.[4]两行CSS代码实现图片任意颜色着色技术：https://github.com/chokcoco/iCSS/issues/32。[5]神奇的CSS掩码：https://github.com/chokcoco/iCSS/issues/80。[6]使用CSS实现彩色三角边框动画：https://github.com/chokcoco/iCSS/issues/162。[7]Github——iCSS：https://github.com/chokcoco/iCSS。