CSS技巧

box-shadow

box-shadow 的好处在于，它支持逗号分隔语法，我们 可以创建任意数量的投影。因此，我们可以非常轻松地在上面的示例中再加 上一道 deeppink 颜色的“边框”:

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

background-position 的扩展语法方案

在 CSS 背景与边框(第三版)(http://w3.org/TR/css3-background)中， background-position 属性已经得到扩展，它允许我们指定背景图片距离任 意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背 景图片跟右边缘保持 20px 的偏移量，同时跟底边保持 10px 的偏移量，可以 这样做(结果如图 2-11 所示):

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;

注意： 我们还需要提供一个合适的回退方案。因为对上述方案来 说，在不支持 background-position 扩展语法的浏览器中，背景图片会紧 贴在左上角(背景图片的默认位置)。这看起来会很奇怪，而且它会干扰到 文字的可读性(参见图 2-12)。提供一个回退方案也很简单，就是把老套的 bottom right 定位值写进 background 的简写属性中

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;