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;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容