CSS outline-width 属性
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浏览器上有一些限制外,它适用于所有现代浏览器。