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

到目前为止我们专注于如何提高响应式图片性能。这是必要的，但是今天，我们依然在页面上使用一样的旧图片。现在，是时候看点有意思的东西了！

平行四边形是矩形的一个超集：它的边是平行的，但是角不一定是直角。在视觉设计，它们往往可以使设计显得更具活力，传达运动感。我们常常使用CSS3 transform中的skew() 来实现，但这种方法常常会使 扭曲元素的内容也会变形，直接影响阅读体验感。那么有什么方案可以解决呢？

border-radius可以给一个元素制作圆角。险些之外，还可以使用它制作随圆形。而这篇文章中主要阐述了如何使用border-radius制作除圆之外的图形——椭圆形。

在第3，4，5部分中，我们专注于分辨率切换的解决方案。现在是时候来研究如何解决艺术指导了。<picture>元素——尤其是媒体属性——被设计来简化艺术指导。

渐变是一个很意思的CSS3属性，有了它可以帮助我们解决很多问题。而这篇文章的内容源于@Keith Clark最近在Twitter发的帖子。CSS的重复线性渐变可以做些什么？我们使用线性渐变和background-size能做出相同的效果吗？而且有哪些效果是linear-gradient和background-size结合在一起无法完成的效果。

上一次我们已经发现了srcset宽度描述符的威力，但他们同时也面临着新挑战－当图片开始下载时浏览器知道的只有视窗尺寸。现在，是时候认识这篇故事里的英雄了：sizes属性。

一直以来，undefined 都不是 JavaScript 的关键字或保留字，这意味着我们可以修改 window.undefined 的值。由于 undefined 会被频繁调用作为比较运算的操作数等原因，修改 undefined 的值是有弊端的，所以在 ES5 规范之后，window.undefined 被定义为不可写、不可配置的属性。

CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。

在CSS2.1的时代要实现图片边框效果是一种奢侈的想法，但在CSS3中虽然增加了border-image属性实现图片边框，但依旧受到诸多的限制性，其中最大的限制就是浏览器对其支持度。在这一节中，我们介绍了使用多背景，以及配合background-clip、background-origin属性模拟出图片边框效果。