outline
和 outline-offset
是 CSS 中用于创建元素边框外部轮廓(outline)的两个属性。这些轮廓与边框(border
)相似,但它们不占据布局空间,也不会影响元素的尺寸或位置。
outline 属性
outline
属性是一个简写属性,用于设置以下四个 outline
相关属性的值:
outline-width
:定义轮廓的宽度。outline-color
:定义轮廓的颜色。outline-style
:定义轮廓的样式(如solid
、dotted
、dashed
等)。outline-offset
:定义轮廓与边框之间的距离(outline-offset
不属于outline
简写属性的组成部分,但经常与outline
一起使用)。
使用示例:
css
div {
outline: 2px solid red; /* 宽度为 2px,实线样式,红色 */
}
outline-offset 属性
outline-offset
属性用于定义轮廓与边框之间的偏移量。正值会使轮廓向外移动,而负值会使轮廓向内移动。这个属性对于创建一些特殊效果非常有用,比如让轮廓看起来像是从元素的内部发光。
使用示例:
css
div {
border: 1px solid black; /* 黑色边框 */
outline: 2px solid red; /* 红色轮廓 */
outline-offset: 10px; /* 轮廓向外偏移 10px */
}
注意事项
- 轮廓(outline)不会占据布局空间,因此它们不会与其他元素重叠或改变元素的尺寸。
- 轮廓(outline)总是绘制在边框(border)的外部,即使设置了
outline-offset
属性。 - 轮廓(outline)不会受到盒模型(box-model)的
box-sizing
属性的影响。 outline
和outline-offset
属性在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不受支持。因此,在使用这些属性时,最好先检查目标浏览器的兼容性情况。