Page 53 - css揭秘

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

描边的另一个好处在于，你可以通过 outline-offset 属性来控制它跟
元素边缘之间的间距，这个属性甚至可以接受负值。这对于某些效果来说非
常有用。举个例子，图 2-8 就实现了简单的缝边效果。
图 2-8
对一层 dashed（虚线）描边使用 这个方案同样也有一些需要注意的地方。
负的 outline-offset 后，可以
得到简单的缝边效果 „ 如上所述，它只适用于双层“边框”的场景，因为 outline 并不能
接受用逗号分隔的多个值。如果我们需要获得更多层的边框，前一
种方案就是我们唯一的选择了。
„ 边框不一定会贴合 border-radius 属性产生的圆角，因此如果元素
是圆角的，它的描边可能还是直角的（参见图 2-9）。请注意，这种行
为被 CSS 工作组认为是一个 bug，因此未来可能会改为贴合 border-
radius 圆角。
图 2-9 „ 根据 CSS 基本 UI 特性（第三版）规范（http://w3.org/TR/css3-ui）所
通过 outline 属性实现的“边 述，“描边可以不是矩形”。尽管在绝大多数情况下，描边都是矩形
框”不会贴合元素的圆角，不过 的，但如果你想使用这个方法，请切记：最好在不同浏览器中完整
这一行为在未来可能会发生变化
地测试最终效果。

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范

„ CSS 基本 UI 特性
http://w3.org/TR/css3-ui

3 灵活的背景定位

难题

很多时候，我们想针对容器某个角对背景图片做偏移定位，如右下角。
在 CSS 2.1 中，我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其
他三个角。但是，我们有时希望图片和容器的边角之间能留出一定的空隙
（类似内边距的效果），以免得到像图 2-10 那样的效果。

22 第 2 章 背景与边框

඀ࠡ JOEC