当你在屏幕上看SVG图像时，你是通过SVG视窗来看到画布的，所以其实你只看到了画布的一部分。画布和视窗是既相互独立又相互联系的概念，它们之间的关系很容易混淆，导致有时会有预料之外的结果。你只有弄明白了它们之间的关系，才知道如何去控制它们。

其实currentColor已经出现了有一段时间了，但我是几个月前在阅读Dudley Storey的文章时才听说了currentColor的。Dudley Storey指出currentColor的浏览器 (包括IE9+)支持是非常好的。这对于我把它用于生产已经是非常足够的了，而且我非常惊讶地发现这个关键字其实非常好用：它有助于让CSS代码变得更简洁和智能。

如果你有使用Sass或LESS，你可能已经在你的样式表中使用过变量了，也知道它们确实非常有用。如果你没有使用预处理器，那么你就可能会好奇这到底是怎么一回事，为什么变量会如此受欢迎，它们为何会这么有用。在这篇文章中，我们先大概讲一下为什么变量如此有用，然后再认识一下另一个特殊的变量：currentColor。

响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去，因为越来越多的设备都可以打开网站。因此，我们需要弄清楚响应式网页设计的一些基本原则，接受流体网页，而不是与之相抗。为了让它保持简单，我们将着眼于布局（是的，响应式比它更复杂，如果你想了解更多，这是一个很好的开端。）

伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素，你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例，你想看的话就接着往下看吧。

过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先，我展示了如何在HTML中嵌入SVG，接着讲解了如何创建SVG预定义的基础图形。为了让创建的图形显示出来，我在这两篇文章中都使用了填充和描边属性。今天我想要详细讲讲填充和描边以及它们的一些相关的属性。

在教学过程中的一个很重要的部分是，学生们通常都有很多非常新鲜的想法。而我们则倾向于思考要如何完成一项任务，也因此错过了很多可用的而且很酷的新技术。看看我们训练营第一个星期的项目，是一个简单的单页网站，用于演示对HTML和CSS的理解：使用语义化的标记语言和CSS来实现样式。我们的其中一个学生，Heather Banks，她曾经作为我的学生part-time参与过HTML/CSS课程，想要复制一个在Squarespace上看到的效果，周围的div元素似乎有被剪裁。

上周我开始了SVG的系列探讨，并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示，所以我创建了一个绿色的矩形。创建矩形的代码并不难理解，我并不打算详细讲解，所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形，但是我觉得我还是需要把它们再过一遍，因为我之前理解得也不够全面，所以再复习一遍也可以帮助我更好地理解。

可缩放矢量图形（SVG）是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展，但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性，所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

每次我讲到图像的时候，我都会提到，在可能的情况下，对于位图来说，可缩放矢量图形（SVG）都是最好的选择。上次我给别人提建议的时候，我意识到我没有自己想象中的那么了解SVG。我之前写过一两篇关于SVG的文章，但也仅是我自己实践经验的一点延伸。我打算今天开始写SVG系列的文章，接下来的几个星期我会介绍一些SVG的基础知识，还会在年尾的时候增加额外的主题来重温这一年讲解的SVG。