你用过outline属性吗？它有什么运用场景？

是的，我了解 CSS 的 outline 属性。它用于在元素周围绘制轮廓线，与 border 不同，outline：

• 不会占用空间: outline 不影响元素的布局，它绘制在元素框的外部，不会改变元素的宽度或高度。border 则会占据空间，影响布局。
• 可以是非矩形: outline 可以跟随元素的 border-radius 属性，绘制圆角轮廓。即使元素有圆角，outline 也会保持圆角。border 则会根据元素本身的形状绘制。
• 可以被裁剪: 如果元素的父级容器设置了 overflow: hidden，outline 会被裁剪。border 不会被裁剪。
• 不支持所有 border 属性: outline 只有一个简写属性，不支持 border-left、border-top 等单独设置某一边的样式。

outline 的一些常见应用场景：

• 焦点样式: 这是 outline 最常见的用途。当元素获得焦点时（例如，用户使用 Tab 键选中一个输入框），可以使用 outline 来突出显示该元素，提供视觉反馈。这对于可访问性非常重要，特别是对于那些依赖键盘导航的用户。
• 调试布局: 由于 outline 不影响布局，它可以用来帮助调试布局问题。例如，你可以临时添加 outline 到一个元素上，看看它实际占据了多少空间，而不用担心 border 可能会干扰布局。
• 创建特殊的视觉效果: outline 可以用来创建一些特殊的视觉效果，例如发光效果或阴影效果。结合 outline-offset 属性，可以使轮廓线与元素有一定的间距，创造更丰富的视觉效果。
• 替代 border 用于纯视觉装饰: 在某些情况下，你可能需要一个纯粹的视觉装饰线，但又不想影响布局。这时，outline 是一个不错的选择。

示例：

input:focus {
  outline: 2px solid blue; /* 蓝色的 2px 实线轮廓 */
  outline-offset: 2px; /* 轮廓线距离元素 2px */
}

div.debug {
  outline: 1px dashed red; /* 用于调试的红色虚线轮廓 */
}

a {
  outline: none; /* 移除链接默认的轮廓线 */
}

需要注意的是，为了保证可访问性，移除焦点样式（例如链接的默认轮廓线）时，应该提供替代的视觉提示，例如背景颜色变化或其他明显的视觉指示，以便用户知道哪个元素获得了焦点。