---

CSS outline-width 属性文档

1. 简介

CSS outline-width 属性用于定义一个元素的外边框的宽度。外边框是在边框外部，以元素四周环绕其它内容的边框。外边框可用于突出显示某个元素，而不影响其布局。该属性可以与outline-style和outline-color属性一起使用，用于渲染元素的外边框。

2. 语法

CSS outline-width 属性可以使用以下语法：

outline-width: thin | medium | thick | <值>

属性值可以是以下几种。

• thin，定义一个细边框，通常约为1像素。
• medium，定义一个中等宽度的边框。
• thick，定义一个粗边框。
• <值>，通过指定一个长度或百分比值来定义边框的宽度。

例如：

p {
  outline-width: 2px;
}

3. 可继承性

CSS outline-width 属性不可继承。

4. 初始值

CSS outline-width 属性的初始值为 medium。

5. 应用案例

5.1 添加外边框

使用 CSS outline-width 属性可以添加外边框，突出显示元素。例如，给按钮添加一个蓝色的2像素宽度的边框：

button {
  outline: 2px solid blue;
}

5.2 改变外边框宽度

使用 CSS outline-width 属性可以改变外边框的宽度。例如，给链接添加一个相对较细的虚线边框：

a {
  outline: 1px dotted black;
  outline-width: thin;
}

5.3 通过 JavaScript 控制外边框

使用 JavaScript 可以访问 CSS outline-width 属性来动态更改元素的外边框。例如，给输入框添加红色的边框，当其值为空时：

input:invalid {
  outline: 2px solid red;
}

6. 兼容性

CSS outline-width 属性兼容所有现代浏览器。在 IE8 及更早版本中不支持使用像素，只能使用关键字“thin”、“medium”和“thick”。

7. 总结

CSS outline-width 属性用于定义外边框的宽度，可以通过关键字或指定长度值来指定外框边框的宽度。可以与outline-style和outline-color属性一起使用，用于渲染元素的外边框。除了在旧版本的IE浏览器上有一些限制外，它适用于所有现代浏览器。