outline 属性在 CSS 中用于在元素周围创建边框，以突出显示焦点或状态。它不同于 border 属性，因为它不占用元素空间，在元素获取焦点时自动显示，并且颜色和样式可以独立设置。语法如下：outline: <color> <style> <width>；用法包括突出显示选中元素、指示输入焦点、创建视觉分隔和调试元素布局。
CSS 中 outline 的用法
outline 属性在 CSS 中用于在元素周围创建一条边框，突出显示其焦点或状态。它与 border 属性相似，但有一些重要区别：
区别于 border 属性
-
outline不会占用元素空间，仅为视觉效果。 -
outline在元素 фокус 时自动显示，而border始终可见。 -
outline的颜色和样式可以独立设置，而border的颜色和样式通常与元素本身的样式相同。
语法
立即学习“前端免费学习笔记（深入）”；
outline 属性的语法如下：
<code>outline: <color> <style> <width>;</code>
其中，
-
color指定 outline 的颜色。 -
style指定 outline 的线型样式（例如，dotted、dashed、solid）。 -
width指定 outline 的宽度。
用法
outline 属性可以用以下方式应用：
-
突出显示被选中的元素：当一个元素被选中时，可以通过为其设置
outline属性来使其脱颖而出。 -
指示输入焦点：当一个元素获得输入焦点时，可以显示一个
outline来表明它正在被编辑。 -
创建视觉分隔：可以使用
outline在元素周围创建视觉分隔符，使其在页面中更加显眼。 -
调试元素布局：在调试元素布局时，可以暂时使用
outline来查看元素的边界，以帮助识别重叠或间距问题。
示例
以下示例显示如何使用 outline 属性突出显示一个选中的按钮：
<code class="css">button:focus {
outline: 2px solid red;
}</code>当按钮获得焦点时，它将显示一个 2 像素宽的红色 outline。
