Web中使用一些图案做为背景图案是一种时常可见的，早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候，会通过CSS的相关技术，比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案，运用于background-image之中。随着前端技术不断的革新，不久前看到一个生成Web图片的组件： —— 使用CSS绘制图案的Web组件！

　　css-doodle是什么

　　这是一个非常强大的Web组件，初次看到，你会觉得她非常的神奇和强大。至于为什么？你要是花日间阅读完后面的内容，你就知道其中的原委了。什么是

　　是一个Web组件。其基于ShadowDOMV1和CustomElementsV1来构建的。该组件可以帮助轻松的使用CustomElements、ShadowDOM和CSSGrid创建任何你想要的图案（CSS图案）。创建出来的图案你可以运用于Web页面中。

　　当你看到CustomElements、ShadowDOM和CSSGrid的时候，你一定会心却，这些东西浏览器能支持。事实上你的担忧是正常的，因为该组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。如果你想运用于其他的浏览器上，你需要相关的Polyfilling。

　　css-doodle使用方法

　　该组件通过其内部的规则（纯CSS）会生成一系列的div构建的CSSGrid。你可以使用CSS轻松地操作这些div（单元格，每个div就是一个单元格）来生成图案。生成的图案既可以是静态的，也可以是动态的。而其限制仅限于CSS本身的限制。

　　开始使用

　　使用组件创建图案很简单，当然有一个前提是你对其相关的API和使用方法有所了解。这里先来看怎么在你的项目中使用该组件。

　　使用组件有两种方法，第一种是比较原始的方法，就是在你的HTML文件中引入该组件所需要的JS和CSS文件。最简单的方法就是直接引用cdnjs。