在 CSS 2.1 中，只能指定图片相对左上角的偏移量，或者使用关键字定位到其他的角落。如果需要让背景图距离元素四边距有一定的偏移量，相对而言是较为麻烦。在这篇文章中，作者通过background-position新特性、修改background-origin以及calc()函数等三种方法，实现了一种灵活型的背景图定位。希望这篇文章对大家有所帮助。

在这个系列教程的前两篇文章中，我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术——创建图形UI组件的技术。具体地说，我们将要讨论的是如何创建圆形菜单效果，因为这是非矩形UI组件的典型案例。

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。

这篇文章通过示例一步一步的告诉大家如何使用CSS来创建3D球体效果。并且如何利用CSS的box-shadow和渐变来给3D球体添加一些光泽效果，让球体更具像是在一个3D空间。并且配合CSS的animation让整个球体运动起来。通过上面的示例再次证明了，运用好了box-shadow和渐变能制作出各种各样的效果。

Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多重元素的嵌套来模拟多重边框。现在，我将告诉你一些更优秀的方法，无需使用多余的标签即可实现多重边框。

虽然在border-color上能运用rgba()、hsla()设置边框为半透明或完全透明，如果元素设置了背景颜色或背景图片的时候，会直接影响边框的透明颜色效果。特别是，要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。要解决这一问题，可以通过CSS3的background-clip来修正。@Chris Coyier早在2010年的时候就在CSS-Tricks详细介绍过这方面的知识。

这是有关于CSS和SVG技术对比的系列文章第二篇，目的是通过示例解释两者的利弊，更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中，我们讨论了使用CSS和SVG创建带纹理的文本效果，并得到结论是：目前阶段，使用SVG比使用CSS做更方便，更强大。在这篇文章中，我们将处理自定义的复选框和单选按钮的效果。

这篇文章是探索有关于CSS和SVG技术的系列文章第一篇，通过例子来阐述CSS和SVG相关技术的比较。因为大家对SVG有一定的偏见，这个系列文章只是为了证明SVG解决Web上的某些设计问题。因为它是自然图像。但从客观的角度来看，我们要考虑每个技术的利弊，找出何时何地使用CSS或SVG更好。在这篇文章中，我们将复习一些使用CSS或SVG创建图形文本的技术和相关影响。

虽然现在很少使用浮动，但在某些情况下，浮动是唯一可行的解决方案。偶尔会觉得很沮丧，因为我觉得浮动应该起作用但是它并没有。所以我决定研究下浮动的工作原理以及如何正确的使用浮动。