【CSS】CSS 的outline-offset和outline属性作用是什么，怎么使用呢

读心悦2024-06-22 19:20

outline 和 outline-offset 是 CSS 中用于创建元素边框外部轮廓（outline）的两个属性。这些轮廓与边框（border）相似，但它们不占据布局空间，也不会影响元素的尺寸或位置。

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 属性用于定义轮廓与边框之间的偏移量。正值会使轮廓向外移动，而负值会使轮廓向内移动。这个属性对于创建一些特殊效果非常有用，比如让轮廓看起来像是从元素的内部发光。

使用示例：

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 属性在大多数现代浏览器中都有良好的支持，但在一些较旧的浏览器中可能不受支持。因此，在使用这些属性时，最好先检查目标浏览器的兼容性情况。