css实现剪切蒙版,魔法般的网页图片修剪！使用Houdini建立CSS剪切蒙版

作为设计开发人员，我们经常将CSS作为理所当然的生产工具。只需要调整一系列参数，我们就可以控制整个网页的样式，而浏览器将会替我们完成一系列复杂的渲染工作。

但当CSS有新功能出现的时候，我们却往往无法第一时间将它应用于生产。这不仅是开发者是否愿意学习的问题，而主要是用户的人均浏览器版本无法很快地跟上时代前沿，导致新的CSS效果无法很好地呈现给用户，甚至会出现恶性Bug。

而Houdini就是为了解决这个问题存在的，它整合了一系列开发规范，让开发者可以最大限度地利用CSS提供的功能。Houdini可以让用户设定的CSS用JavaScript进行算法和排版的规范化呈现。

Houdini可以做什么？

实际上，Houdini是一系列API，用以实现CSS和JavaScript功能的相互代替。在特定的浏览情境下，Houdini可以寻找到该浏览器版本最适合的渲染方式，并决定用CSS还是JavaScript交付给浏览器进行渲染。

Houdini服务于浏览器呈现内容的中间过程，它可以辅助特定内容比如动画的呈现，是一款轻量化专用型的工具。工作原理完全是网络API形式，即将特定内容从标准的浏览器信息流里分离出去单独进行处理，并以响应式方式返回到浏览器中。由于这种特性，Houdini有很好的可拓展性，未来支持的功能范围会更广。

目前这些API仍处于早期阶段，主要支持Chrome(v66版本)和Opera浏览器(v53版本)。CSS绘图API可以让开发者用JavaScript实现原本由CSS对图像做出的处理。如今开发者正致力于让Houdini适用于Safari浏览器，而更多API也即将登陆Chrome。目前Houdini的API已经符合W3C推荐标准，未来发展潜力很大。