在Q&A网站上，我看到的关于box-shadow被问得最多的问题是，阴影如何只应用于物体的单侧（或双侧，问得比较少）。在stackoverflow.com上快速搜索，也能找到将近一千个结果。这是可以理解的，因为单侧阴影能呈现出一个比较细微的、但同样效果逼真的阴影效果。通常情况下，纠结于阴影效果的开发人员甚至会给CSS工作小组发邮件，请求希望能够有新的像box-shadow-bottom这样的属性，来方便他们的开发。但是，这样的效果完全可以通过巧妙地使用我们已经学习并深深喜爱着的box-shadow属性来完成。
图标字体的使用在慢慢减少。最近很多人找出了不要使用字体图标的理由，并劝大家使用SVG图像。在《金融时报》（注：作者是一名《金融时报》的前端工程师），我们一致认为，总的来说，是时候探索作出一些转变了。
可能并不是那么显而易见，但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴，还有控制第三维度的z轴。
我之前谈到了一点关于SVG<use>的内容——使用它来创建图标系统。<use>的美妙之处在于你可以定义一次SVG，然后在其它地方可以对其多次引用。这种特性使得我们可以创建图标系统，解决“多张图仅需要发一次请求，因为这super高效”这个我们过去用CSS sprite和图标字体解决的问题。但是<use>意味着内联SVG。当你想要使用一个比较大的SVG文件中的一部分时，如使用SVG作为<img>或background-image引入。这就用到片段标识符啦。
动画在Web上的运用到目前为止已不是新课题。大家常常能看到的Web动画有CSS动画、JavaScript动画、SVG动画和HTML5的Canvas动画。最近开始也有不少同学开始在探讨WebGL动画。随着年关将近，今天决定将Web上使用到的一些动画做一个资源整合(主要是为后期的工作做一些储备，因为未来的一段时间的工作主要会和动画交互关联在一起)。在这个集合中主要涵盖了动画的库、框架、教程和性能等。
写一次SVG代码，然后在多个地方重用，可以帮助你写出更多模块化的代码，而且它也有助于维护。通过tref元素，SVG可以很方便地重用text元素的内容。上周我大概讲解了tspan元素，并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——x、y、dx和dy，还提到了其它几个属性。我们现在来讲讲剩下的两个属性，然后再讲讲使用tref元素重用SVG文本。不过注意tref元素是SVG 1.1规范的一部分，它已经从SVG 2.0规范中删除了。我在这里介绍它，也许哪天你就碰到它了呢。
SVG的<text>元素允许你很简单地定位和给文本添加样式，但是如果你想要针对文本的不同部分定位和添加样式呢？难道我们要去创建多个text元素吗？不需要的。有更简单的方式，tspan来拯救世界了。前两周我们已经看了SVGtext元素，并整理了几个我们可以使用的属性。<text>元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合<text>元素使用的SVG元素——<tspan>和<tref>。
上周我们学习了如何使用<text>元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本，也尝试了给SVG文本中的每个字符定位。关于<text>元素还有很多内容。在处理SVG文本时，不要局限于x和y属性。<text>元素还有几个可以添加的属性，现在我们开始讨论吧。
到目前为止，我们已经使用 PostCSS 做了很多事情，比如，优化样式，给预处理器增加功能，生成某些符合规范的样式，但是它只有帮助写原始 CSS 的人吗？每个 Web 设计师在他们的职业生涯中都会写出有很多可复用的代码，如果你能用一点时间把每一个都收集起来到最后那将会变得很多。在本教程中，我们要使用 PostCSS 的一系列的简写和速写来减少每天的编代码的时间。 让我们开始吧！