css中outline方法的使用

outline 不占布局空间且环绕元素绘制，常用于焦点提示；通过 outline-color、style、width 设置样式，配合 outline-offset 控制偏移，提升可访问性。

在CSS中，outline 属性用于在元素的边框边缘之外绘制一条轮廓线，用来突出显示元素。它与 border 相似，但有本质区别：outline 不占据文档流空间，不会影响布局，通常由浏览器自动添加（比如聚焦状态），也可以手动设置。

outline 与 border 的主要区别

理解 outline 的使用，首先要清楚它和 border 的不同：

• 不占空间：outline 不会影响页面布局，不会改变元素的大小或位置
• 居中绘制：outline 是围绕元素边框外绘制的，可能向内也可能向外延伸
• 不能单独设置某一边：不像 border 可以设置 top、right 等单边，outline 是环绕整个元素的
• 常用于可聚焦元素：如按钮、输入框获得焦点时的视觉提示

outline 属性的语法

outline 是一个简写属性，可以同时设置颜色、样式和宽度：

例如：

立即学习“前端免费学习笔记（深入）”；

也可以单独设置每个子属性：