What is the difference between CSS border and outline?

在CSS中，border 和 outline 都可以为元素提供边框，但它们之间存在几个关键区别：

1. 盒模型的影响：

   • border 是盒模型的一部分，它会影响元素的总体尺寸（即，如果你设置了border，它会增加元素的宽度和高度）。
   • outline 不是盒模型的一部分，它不会影响元素的尺寸，它是绘制在元素外围的，不会占据空间。

2. 样式的不同：

   • border 可以设置每一边的样式（如 border-top, border-right, border-bottom, border-left），可以分别控制每一边的宽度、样式和颜色。
   • outline 通常被视为整体，不提供设置单独一边的选项。它的样式、宽度和颜色是一致的，覆盖所有四边。

3. 圆角效果：

   • border 可以设置border-radius属性，让边框拥有圆角。
   • outline 传统上不支持圆角（尽管在一些最新的浏览器版本中可能开始支持，但不是所有浏览器都支持）。

4. 可用性差异：

   • border 通常用于元素的装饰和布局调整。
   • outline 经常用于可访问性目的，如高亮显示键盘焦点，它不会被常规的border样式所干扰。

示例

假设我们有一个按钮，我们希望在用户点击时显示一个外轮廓来增强可视反馈，同时不影响布局：

html
<button>点击我</button>

css
button {
  border: 2px solid blue;
  padding: 10px 20px;
  background-color: white;
}

button:focus {
  outline: 3px solid red;
}

在这个例子中，按钮有一个蓝色的边框，并且在获得焦点时，会添加一个红色的轮廓。这个轮廓不会影响按钮的实际尺寸，只是在视觉上提供反馈。而蓝色的边框则是按钮的一部分，并对按钮的大小产生影响。