之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。绘制自定义图形需要制定矢量类型为 shape，并通过 points 的 Array 数组指定每个点信息， points 以 [x1, y1, x2, y2, x3, y3, ...] 的方式存储点坐标。曲线的多边形可通过 segments 的 Array 数组来描述， segment 以 [1, 2, 1, 3 ...] 的方式描述每个线段： 1: moveTo，占用 1 个点信息，代表一个新路径的起点 2: lineTo，占用 1 个点信息，代表从上次最后点连接到该点 3: quadraticCurveTo，占用 2 个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点 4: bezierCurveTo，

这是一篇翻译自 css-tricks 上的文章，当你 Google css grid 的时候，第一个条目便是这篇原文，小伙伴们赶快学起来！Grid 作为一个新的 CSS 的属性，即将被浏览器所支持。它将彻底改变网页的布局方式，使响应式设计变得更加简单。

曾有人调侃，设计模式是工程师用于跟别人显摆的，显得高大上；也曾有人这么说，不是设计模式没用，是你还没有到能懂它，会用它的时候。

特性查询、栅格布局、原生变量，赶紧用起来~

最简单实用的 Flex 布局教程，30 分钟让你学会 Flex 语法基础。

在前端领域中，掌握三栏布局是一个开发人员必备的技巧，本文将介绍七种三栏布局的技巧，在实际开发中，你可以选择适合自己实际需求的方式。

CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局。然而Flex属性较多，不便于记忆，而在项目中，布局使用频繁，那么可以将flex抽离为一个布局工具类，简化使用方式，快速应用于项目，减少记忆成本。 Fle…

页脚置底（Sticky footer）就是让网页的 footer 部分始终在浏览器窗口的底部。这样的布局随处可见，偶然看到 CSS-TRICKS 上介绍页脚置底的文章觉得不错，对开阔布局的思路挺有帮助，遂译之。

HTML 结构的思路 - 1 分钟阅读 透视与 3D 空间 - 2 分钟阅读 书封旋转的具体实现 - 4 分钟阅读 兼容性 - 6 分钟阅读