css中outline和border的区别

在 CSS 中，outline 和 border 都是用于为元素绘制“边框”的，但它们在作用、布局影响、语法、使用场景等方面有明显区别：

举个例子：

    
    
    
  button {
  border: 2px solid blue;
  outline: 3px solid red;
}

• o border 是蓝色实线，会撑大按钮尺寸；
• o outline 是红色实线，不会撑大按钮，绘制在 border 外围。

总结一句话：

border 是“布局的一部分”，outline 是“视觉的点缀”，不干扰布局。

小提示：

• o 做焦点样式时优先用 outline，避免布局跳动；
• o 做装饰性边框用 border，可以控制每一边、加圆角。