如果你想真正的知道PostCSS的话，你就应该尽快学会PostCSS是什么以及如何使用它。在这个系列中，我们将带你深入了解PostCSS以及如何使用PostCSS方法。如果你还没有做好思想准备去了解PostCSS能做什么，那么可以跟着这个系列进入学习，这个系列将带你进入到CSS的新世界之中。

有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教，如果有可能，在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel动画，所以说使用一些数学计算是有可能得到相应改善。

如果你使用过 Sass 3.3 之前的版本，那么你一定对那段时光颇有感触，那时候没有现如今这么好的条件，那时候的 Map 还只能用多重列表（lists of list）来模拟。多重列表可以实现复杂数据的嵌套定义，但却不是以键值对的形式实现的，所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式，非常便于组织数据。

这一切都始于媒体对象(Media Object)。其实就是Nicole写的一个CSS代码片段,这个代码片段是常用来阐述OOCSS的最佳示例。这篇文章能让你对媒体对象更佳的熟悉与了解，如果对媒体对象一点都不了解，建议你先点击这里了解一二。

我们做到了！我们到了响应式图片101系列的结尾。在与这个系列就此分别之前，我想给出一些提示，资源和一些关于响应式图片发展的最终思考。

我其实很害怕写响应式图片101系列里图片断点这个部分。选择图片断点每个人都会遇到，坦白说，我也没有一个好的解决方案。但我们迟早会遇到图片断点的问题。所以不妨现在就开始研究。

大多数时候谈到响应式图片，人们指的是内联图片，而不是CSS图片。这是因为在<picture>和srcset之前内联响应式图片还没有好的解决方案。但遇到CSS图片时，我们可以使用媒体查询，那还有什么可担心呢？现在是时候回顾响应式CSS图片并基于我们已经学过的内联图片寻找解决方案。

梯形应用得比平行四边形更普遍：只有两条边是平行的。另外两条可以是任何角度。以前，它们都是CSS中很难创建的形状，尽管它们特别常用，特别是对于标签。作者要么是通过精心设计的背景图像来模拟它们，要么是一个矩形旁边带两个三角形来创建，或者是通过边框来伪造一下。

斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这种效果更加流行。当斜切角只存在元素的一侧，并且每个都占据元素的50%高度的时候，一个箭头的形状产生了，这在按钮和面包屑导航中非常受欢迎。

菱形裁剪图片在视觉设计中非常常见，但是这种效果没办法直接用CSS完成。实际上，直到最近，这基本上还是不可能做到的。因为，当网页设计师想要使用这种样式，他们通常会先用图像编辑器预裁剪图像。当然，不用想都知道，这对于应用任何效果都不是一种可维护的方式，如果后面有人想要改变图像样式，最后的结果都会变得非常混乱。当然，现在有一个更好的方法，对吧？实际上，有两个耶！