outline属性用于添加不占布局空间的轮廓线，提升键盘用户的可访问性；2. 与border不同，outline不支持圆角且默认为矩形，常用于focus状态；3. 可通过outline-color、style、width设置样式，并用outline-offset调整间距；4. 避免直接outline:none，应结合box-shadow等提供替代视觉反馈。
在网页开发中，outline 属性常用于为元素添加轮廓线，尤其在提升可访问性方面起到关键作用。它与边框（border）类似，但不会影响布局，也不会占用空间，通常用来表示元素的焦点状态，帮助键盘用户识别当前操作的元素。
outline 与 border 的区别
虽然视觉上相似，但 outline 和 border 有本质区别：
- 不占布局空间：outline 不会影响元素的尺寸或位置，绘制在元素边缘之外，不影响文档流。
- 非矩形支持有限：outline 通常是矩形，不支持像 border 那样设置圆角（如 border-radius 的效果不会改变 outline 形状）。
- 常用于可聚焦元素：浏览器默认会在 input、button、链接等获得焦点时显示 outline，用于辅助导航。
outline 属性的基本用法
outline 是一个简写属性，可同时设置颜色、样式和宽度：
element {
outline: 2px solid blue;
}
也可以分开设置：
立即学习“前端免费学习笔记（深入）”；
- outline-color：设置轮廓颜色，如 red、#000、transparent。
- outline-style：常用值包括 solid、dashed、dotted、none 等。
- outline-width：可设为 thin、medium、thick 或具体像素值（如 3px）。
例如，自定义按钮焦点样式：
button:focus {
outline: 3px dashed #007acc;
outline-offset: 2px; /* 轮廓线与元素之间的距离 */
}
合理使用 outline 提升可访问性
移除 outline（如设置 outline: none）会降低键盘用户的使用体验，应避免直接清除而不提供替代方案。
如果默认样式影响设计，推荐做法是：
- 保留 focus 样式，但重新设计更美观的轮廓或高亮效果。
- 使用 outline-offset 控制轮廓位置，避免与边框粘连。
- 结合 box-shadow 实现更灵活的焦点提示，例如：
input:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(0, 127, 204, 0.3);
}
基本上就这些。正确使用 outline 不仅能增强界面反馈，还能让网站对更多用户友好，尤其是依赖键盘操作的人群。不复杂但容易忽略。
