当我们想要为矩形或任何可以用border-radius创建的形状应用投影的时候，box-shadow是非常棒的。但是，当我们有伪元素或其他半透明的样式的时候，它可能就不是那么好用了，因为box-shadow会耍赖忽略透明度。那是否有适用这种情况的解决方案呢，还是说这里我们只能完全give up阴影效果了？

在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>元素还有几个可以添加的属性，现在我们开始讨论吧。

SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染，这样你可以添加描边和填充，像图形、线条和箭头那样。它还可以被打包成XML字符数据，也就是说它是真的文本。