而个中最为出名的是@Lea写的CSS3 Patterns，并且@Lea在其《CSS Secrets》一书中特殊先容了CSS如何实现繁芜背景图案。虽然CSS Patterns实现的图案是令人感到惊艳与好奇，但其扩展性以及适配性还是有一定的限定。因此有同学将CSS Patterns换成了SVG Patterns（也便是利用SVG干系的特性实现了CSS Patterns相同的效果）。当然，除此之外，还有很多工具能帮助我们来实现CSS图案的效果，个中有的工具可以天生代码，而有的工具会天生图片。
随着前端技能不断的改造，不久前看到一个天生Web图片的组件：<css-doodle /> —— 利用CSS绘制图案的Web组件！
这是一个非常强大的Web组件，初次看到，你会以为她非常的神奇和强大。至于为什么？你假如花白天阅读完后面的内容，你就知道个中的原委了。为了让大家对其有初次的觉得，先上一个利用<css-doodle />组件创作的图案效果，如下：
是不是有点蠢蠢欲动的觉得。如果是的话，随着下面的节奏连续往下阅读。
什么是<css-doodle />
<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的利用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。创建出来的图案你可以利用于Web页面中。
当你看到Custom Elements、Shadow DOM和CSS Grid的时候，你一定会心却，这些东西浏览器能支持。事实上你的担忧是正常的，由于该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。如果你想利用于其他的浏览器上，你须要干系的Polyfilling。
大略点说：
该组件通过其内部的规则（纯CSS）会天生一系列的div构建的CSS Grid。你可以利用CSS轻松地操作这些div（单元格，每个div便是一个单元格）来天生图案。天生的图案既可以是静态的，也可以是动态的。而其限定仅限于CSS本身的限定。
开始利用<css-doodle />
利用<css-doodle />组件创建图案很大略，当然有一个条件是你对其干系的API和利用方法有所理解。这里先来看怎么在你的项目中利用该组件。
利用<css-doodle />组件有两种方法，第一种是比较原始的方法，便是在你的HTML文件中引入该组件所须要的JS和CSS文件。最大略的方法便是直接引用cdnjs：
[xml] view plain copy
<script src=\"大众https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js\"大众></script>
这个script你可以在</head>或</body>结束标签前调用。然后在任何你想要的地方调用：
[xml] view plain copy
<css-doodle> / 绘制图案的代码放在这里 /
</css-doodle>
如果你不想利用cdnjs供应的在线资源，你也可以将css-doodle-0.3.0.min.js文件下载到你本地的项目中，通过相对路径来引用下载的文件。
除此之外，也可以通过npm的办法将<css-doodle />安装到你的项目中，然后通过import的办法将其引入到你的项目中。比如说在Vue项目中，你可以先实行：
npm install css-doodle
或者利用yarn来安装：
yarn add css-doodle
然后在你想要利用<css-doodle />的地方先import，比如在App.vue文件中：
[python] view plain copy
import CSSDoodle from 'css-doodle'
然后你就可以在<template>中引用，比如：
这时在你的页面中看到的效果如下：
这个时候，你和我可以一样，对<css-doodle></css-doodle>中代码一无所知，但正是这里面的一些代码天生了上图这样的效果。这个时候你通过浏览器开拓者工具查看代码的时候，你会看到天生的代码如下图所示：
基本语法
<css-doodle />的语法是基于CSS的，这一点须要特殊记住 —— 统统能用于Web的CSS，都可以用于此处！
。除此之外，他还供应了一些额外的实用函数和简写的属性。这些函数和属性可以在其官网中查阅。
有关于<css-doodle />供应的函数和属性，在本文章中不做逐一先容，如果你想利用该组件来创作一些故意思的Web图案，那非常有必要花一定的韶光去阅读官方文档。并考试测验自己写写Demo。你会很快就能节制这些规则和利用姿势！
先看一个大略示例
利用<css-doodle />其后台运行机制是利用CSS Grid布局创建一个网格系统。实在创建一个大略的网格是<css-doodle />最为大略的一个示例。比如说，我们创建一个5 x 8（五行八列）的网格，并且这个网格的width和其父容器的宽度相同（即100%）,高度为浏览器屏幕高度的五分之一。那么我们就可以这样写代码：
你将看到的效果如下：
特殊把稳：如果你的浏览器看不到任何的效果，请确认你利用的是最新版本的Chrome或Safari浏览器！
后续的示例不再做干系的提示！
为了帮助没韶光阅读官方文档的同学能看懂上面的代码，这里大略的做一下解释：
:doodle：是一个分外的选择器，其指向的是组件元素本身，即<css-doodle />。把稳，其样式会被你的CSS样式覆盖@grid：创建一个网格，其后面配置的参数解释你要创建的网格。比如上面的示例5x8 / 100% 100vh;。个中5 x 8表示的是创建一个五行八列的网格；100%表示网格的宽度（和其容器宽度相同）；100vh表示网格的高度（浏览器屏幕的高度）:after：每个单元格的伪元素，用于天生内容，比如你在效果中看到的数字@index()：是一个函数，返回当前单元格的索引号，把稳其开始值是从1开始@even：对应的偶数单元格，这里将偶数单元格的背景颜色设置为#f36@odd：类似于@even，但对应的是奇数单元格再来看一个繁芜的示例
上面看到的效果是一个大略的示例效果，利用了一些最基本的样式规则写了一个五行八列的网格。实在我们还可以利用<css-doodle />供应的一些函数和一些其他的CSS样式规则，制作一些繁芜的效果，而且还可以是带有动效的。比如下面这个示例：
对应的效果如下：
效果是不是很炫，很酷!
@place-cell：将单元格相对布局@size：设置单元格的width和height@rand：从数字的范围内返回一个随机值@pick：给定的列表中随机选取一个值正如你所见，在上面这个示例中，还利用了@keyframe来声明动画，并且还利用了CSS自定义属性。再次验证，只假如浏览器支持的CSS属性都可能用于<css-doodle />。
带有交互效果的案例
上面的示例，利用@keyframes可以做一个带有动画的效果。除此之外，还有更神奇的效果，那便是利用<css-doodle />的JavaScript API还可以实现现有交互效果的图案。比如下面这个示例：
当我们鼠标悬浮在上面的时，图标会旋转，这依旧采取的是@keyframes做的一个大略动画。除此之外，你点击屏幕时，全体图案会更新。
实现这样的效果很大略，就只是大略的加了下面这么几行JavaScript代码：
[php] view plain copy
const myDoodle = document.querySelector('.my-doodle'); myDoodle.addEventListener('click', () => { myDoodle.update(); });
利用了一个.update()函数，当你在屏幕单击时，全体组件会利用给定的样式重新刷新。
上面看到的是不同办法实现的一些图案效果。除些之外，你可以发动你的大脑和创意，制作一些其他更故意思的图案效果。如果你感兴趣的话，可以看看@yuanchuan在Codepen整理的有关于<css-doodle />组件制作的一些图案效果。
总结
这篇文章紧张科普了一下<css-doodle />组件。大略的回顾一下，该组件是一个Web组件，紧张是基于Shadow DOM V1 和 Custom Elements V1 来构建的。而其背后运行的事理是利用CSS Grid和纯CSS规则制作的一些图案。除了CSS自带的规则之外，该组件还封装了一些函数和属性，能让你快速制作一些图案。其余还你还可以利用Unicode字符创建一些字符图案。
当你阅读到这里的时候，我想你对<css-doodle />组件有所理解，如果你动手了，或许你创作出一些分歧凡响的图案效果。希望你能不才面的评论等分享您的作品。如果你有其他的想法，也欢迎不才面的评论等分享。末了，该文章假如对您有所帮助的话，欢迎各位爷打个赏，鼓励我连续创作一些优质的教程。(^_^)
