CSS 轮廓（outline）属性

轮廓 outline 是绘制在元素外围的一圈描边，常用于焦点提示、选中高亮等临时强调。它与边框 border 很像，但最大的特点是不占页面空间：画出轮廓不会挤动布局，非常适合做"提示但不捣乱"的效果。

outline 与 border 的区别

两者外观相似，关键差别在于：border 属于盒子模型，会占位并撑大盒子；而 outline 画在元素之外、不参与布局计算，因此加轮廓不会让页面元素"跳动"。

div {
  border: 2px solid #333;      /* 占位的边框 */
  outline: 2px dashed red;     /* 不占位的轮廓，画在最外层 */
}
/* 效果：红色虚线轮廓紧贴在黑色实线边框外侧 */

outline-style 先设样式

和 border 一样，要先写 outline-style 才能看见轮廓，常用取值有 solid、dashed、dotted、double 等；配合 width 与 color 就能完整控制：

a:focus {
  outline-style: solid;    /* 获得焦点时显示实线轮廓 */
  outline-color: #ff9800;  /* 橙色 */
  outline-width: 3px;      /* 粗细 3px */
}
/* 效果：用键盘 Tab 聚焦链接时，出现一圈橙色提示 */

简写与 outline-offset

可合并成一行 outline: 宽度 样式 颜色;。outline-offset 属性还能让轮廓与元素之间留出空隙，做出"外发光"式的强调效果：

.card:hover {
  outline: 3px solid #66bb6a;
  outline-offset: 4px;   /* 轮廓向外偏移 4px，不与卡片重叠 */
}
/* 效果：鼠标悬停时卡片外圈出现绿色轮廓，与卡片留有 4px 空隙 */

使用场景

轮廓最典型的用途是网页的无障碍焦点提示：键盘用户按 Tab 移动焦点时，轮廓告诉他们"现在选中了哪个元素"，所以不要轻易删除默认轮廓。其次是选中项高亮、拖拽提示等临时强调，因为不占空间，很适合做"醒目但不挤版"的效果。

小结

outline 是一圈"免费"的描边：不占布局空间、不影响盒子尺寸，配合 :focus、:hover 与 outline-offset 可以做焦点提示和高亮强调；若想自定义焦点样式，请用 outline:none 并自行设计替代提示，别牺牲键盘可访问性。