在上一节中，我们学习了如何使用 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应用程序。有了这个工具，你可以做很多有趣的事情。

和其他视觉设计相关的媒体一样，在 Web 上各类大小、颜色、角度不同的纹理也非常流行。不过，实现这些纹理的技术却并不理想。通常，我们需要创建独立的位图，如果有需求变更的话都需要重新更改文件。有些开发者使用 SVG 替代位图，但是 SVG 仍然是一种独立的文件，而且其语法也不够友好。那么是否有一种出色的方法让我们直接在 CSS 中创建纹理呢？你会惊喜的发现，我们将在文中逐步解决这一问题。

border-radius属性在CSS中已经不是什么新东东。大家都知道它可以帮助大家很容易完成圆角效果。有些时候，我们只希望容器的内部边框是圆角的，但是外部轮廓线要是矩形的，要完美的实现还是需要一定的技巧的。这篇文章告诉大家如何通过数学中的勾股定理来实现内凹圆角效果。