CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。

在CSS中要实现一个动画按一个指定的路径运动，相对而言是较为困难的。虽然通过transform能模拟出来一定的效果，但要达到很完美的效果是非常的痛苦的，也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范，但这个属性能帮助大家轻易实现一个动画按指定路径运动。

CSS画图形在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。

当在函数调用中通过arguments对象访问参数时，我总是感觉很不爽。它那硬编码的名字使得要想在内层函数(它拥有自己的arguments)中访问外层函数的arguments变得很困难。更糟糕的是它是一个类数组对象。这意味着你不能直接在它身上调用类似.map()或是.forEach()这样的方法。

许多时候，this关键词对我以及许多刚起步的JavaScript程序员来说，都是一个谜。它是一种很强大的特性，但是理解它需要花不少功夫。对有Java, PHP或者其他常见的编程语言背景的人来说，this仅仅被看成是类方法中当前对象的一个实例：不会多也不会少。多数时候，它不能在方法外被使用。正是这样一种简单的使用方法，避免了混淆。

一个函数一次性定义的代码块可以多次调用。在JavaScript中，一个函数有很多元素组成，同时也受很多元素影响：函数体的代码、函数的参数列表、 接受外部变量域的变量、返回值、当函数被调用时，this指上下文、 命名和匿名函数、 函数对象作为变量声明和 arguments对象(在ES6中的箭头函数中将丢弃这个)等。这些元素都会影响到函数，但具体影响函数的行为还是取决于函数的声明类型。

在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥，就算是有创意，前端实现也将付出巨大的开发成本。

写CSS很容易。写持续可维护的CSS则很难。你也许听说过不下100 次了。因为在CSS中默认都是全局的申明。如果你是个写C的程序员你知道全局变量是糟糕的。如果你是程序员你会知道，独立及可组合的模块是一个可维护系统的关键所在。

上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等，那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理，希望对您平时开发有所帮助。

@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》。整个PPT中介绍了一些前端开发中使用到的一些黑魔法，当初看的时候特别的带劲。一直想将里面的内容整理出一篇文章出来，但一直没整，趁最近休假的闲暇时间整理了一下。