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

虽然平铺几何图形很棒，但看起来还是有点乏味。而在自然界中，万事万物皆有不同。即使是在相似中，也充满了变化和随机因素。你可以看一看花圃：虽然花朵具有一致的艳丽，但也各有各的亮点。这个世界上没有任何两朵花是相同的。这就是为什么我们要尝试让背景图案接近真实，而且我们也在尝试让平铺的元素之间尽量减少缝隙，让它们显得浑然天成自成一体，但是这也会让样式文件的大小超出我们的预期。

在上一节中，我们学习了如何使用 CSS 渐变创建各种类型的条纹。不过，条纹并不能代表所有的背景图案，最多只能算是背景中的几何图案。此外，我们还会常常用到许多类型的背景，比如网格、波尔卡圆点、棋盘格等等。值得庆幸的是，CSS 的渐变属性就可以帮我们创建这些背景图案。虽然几乎可以使用 CSS 的渐变创建各种类型的几何图案，但是这些背景图案的效果并不具有实用性。如果开发中稍不注意，那么代码就会迅速变得冗杂和繁琐。CSS 的背景图案也是非常适合使用 CSS 预处理器来处理的问题之一，比如可以使用 Sass 来减少重复背景图案中的重复工作。

在响应式图片101系列教程中的第三篇中，我们学习了显示密度描述，并且总结出它们适合用于固定宽度图片，但是对于自适应图片有所不足。伸缩使图片就需要用到srcset的宽度描述符。

自从苹果发布带retina显示屏的iPhone 4，网页设计人员一直在找一个处理高分屏的方案。于是引入了srcset和它的显示密度。首先提醒大家，显示密度是一种分辨率切换使用情况。当我们解决分辨率切换问题时，我们需要使用srcset。我们想要使用srcset的原因是它让浏览器可以选择。当使用<picture>元素提供的media属性时，实际上我们在告诉浏览器必须使用哪个图片。这对于艺术切换很有效。遇到分辨率切换的情况时，浏览器知道哪张图片显示效果最好。它可以根据网络情况或用户行为等因素来做决定。

我们需要的响应式图片解决方案的主要原因之一是<img>元素功能不足。它只有一个src属性，只能加载一张图片资源，但是我们需要加载多个资源。既然如此，你可能会很惊讶怎么我们还在讨论<img>元素而不是其他新东西例如<picture>和srcset。不管采用哪种响应式图片方案，<img>元素必不可少。<img>元素在所有的内联响应式图片解决方案中都饱受诟病。我喜欢把img当做一个添加和应用所有响应式图片规则的盒子。

过去这些年，我们写了不少关于响应式图片的文章。如今既然响应式图片已经运用在浏览器里了，似乎也是时候回顾和总结一些入门指南给那些刚刚开始探索响应式图片的同学。因此，我们推出一个新系列叫做响应式图片101，在里面我们会谈到为什么需要响应式图片以及如何选择正确的响应式图片解决方案。让我们深入学习吧！

这是CSS技术和SVG技术对比系列教程中最后一篇。本文选取了几个CSS和SVG的解决方案，而不是一个解决方案——使用CSS和SVG实现。有关于解决方案的每个细节已经有很多这方面的优秀文章，如果你感兴趣的话，可以阅读有关于这个系列的所有文章。

我结束了最近的“如何使用<picture>和srcset”教程，不知道你们是否也看过。给大家呈现了一些简单的知识来达到很好的教学目的，却没有让你为更多的不寻常的应用程序遇到的难看的效果做处理。我遇到过一些比较冷僻的例子和需要当心的怪异模式，也发现了一些上面说的不寻常的应用程序。可能他们可以帮到你。

顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情。