CSS Houdini实现动态波浪纹

我们知道，浏览器在渲染页面时，首先会解析页面的 HTML 和 CSS，生成渲染树（rendering tree），再经由布局（layout）和绘制（painting），呈现出整个页面内容。在 Houdini 出现之前，这个流程上我们能操作的空间少之甚少，尤其是 layout 和 painting 环节，可以说是完全封闭，使得我们很难通过 polyfill 等类似的手段为欠支持的 CSS 特性提供兼容。而另一方面，语法特性的缺失也极大地限制了 CSS 的编程灵活性，社区中 sass、less、stylus 等 CSS 预处理技术的出现大多都源于这个原因，它们都希望通过预编译，突破 CSS 的局限性，让 CSS 拥有更强大的组织和编写能力。所以慢慢地，我们都不再手写 CSS，更方便、更灵活的 CSS 扩展语言成了 web 开发的主角。看到这样的情况，CSS Houdini 终于坐不住了。

什么是 CSS Houdini？

CSS Houdini 对外开放了浏览器解析流程的一系列 API，这些 API 允许开发者介入浏览器的 CSS engine 运作，带来了更多的 CSS 解决方案。

CSS Houdini 目前主要提供了以下几个 API：

CSS Properties and Values API

允许在 CSS 中定义变量和使用变量，是目前支持程度最高的一个 API。CSS 变量以 -- 开头，通过 var()调用：

div {
  --font-color: #9e4a9b;
  color: var(--font-color);
}

此外，CSS 变量也可以在其他节点中使用，只不过是有作用域限制的，也就是说自身定义的 CSS 变量只能被自身或自身的子节点使用：

.container {
  --font-color: #9e4a9b;
}
.container .text {
  color: var(--font-color);
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（学习工具，详细的前端项目实战教程，PDF

定义和使用 CSS 变量可以让我们的 CSS 代码变得更加简洁明了，比如我们可以单纯通过改变变量来改变 box-shadow 的颜色：

.text {
 --box-shadow-color: #3a4ba2;
 box-shadow: 0 0 30px var(--box-shadow-color);
}
.text:hover {
 --box-shadow-color: #7f2c2b;
}

Painting API

允许开发者编写自己的 Paint Module，自定义诸如 background-image 这类的绘制属性。自定义的重点在于，“怎么画” 的逻辑需要我们来描述，因此我们利用 registerPaint 来描述我们的绘制逻辑：

registe