CSS中的outline是用于设置元素外轮廓样式的属性，它不会占用页面布局空间，不会影响元素本身的位置和其他元素的排列，常用来做元素的交互提示或者临时高亮标记。和border属性不同，outline不需要提前预留空间，也不会改变元素的盒模型尺寸，非常适合需要临时展示轮廓的场景。
outline的核心属性
outline是复合属性，由三个基础子属性组成，也可以直接通过复合属性一次性设置所有值，三个子属性分别对应轮廓的样式、宽度和颜色。
1. outline-style
该属性用于设置轮廓的样式，是outline的必填属性，如果不设置该值，其他轮廓属性都不会生效。常见的取值如下：
- none：默认值，不显示轮廓
- solid：实线轮廓
- dashed：虚线轮廓
- dotted：点状轮廓
- double：双线轮廓
- groove：3D凹槽轮廓
- ridge：3D凸槽轮廓
2. outline-width
该属性用于设置轮廓的宽度，取值可以是具体的长度单位，比如px、em、rem，也可以是关键字thin、medium、thick，默认值是medium。
3. outline-color
该属性用于设置轮廓的颜色，取值可以是颜色名、十六进制颜色值、rgb或者rgba值，默认值是currentColor，也就是和元素当前的文字颜色保持一致。
outline复合属性用法
可以直接使用outline复合属性一次性设置三个子属性，语法格式为outline: outline-width outline-style outline-color，三个值的顺序可以调整，但是outline-style必须存在，否则轮廓不会显示。
下面是一个基础的outline使用示例，给按钮元素设置蓝色实线轮廓：
/* 给按钮设置2px宽的蓝色实线轮廓 */
.btn {
padding: 8px 16px;
font-size: 14px;
outline: 2px solid #2196f3;
}
outline和border的差异
很多开发者会混淆outline和border，两者的核心差异如下：
| 对比项 | outline | border |
|---|---|---|
| 是否占用布局空间 | 不占用，不会影响元素位置和周边元素排列 | 占用，会算入元素盒模型，可能改变布局 |
| 是否可单独设置某一边 | 不可以，outline是环绕元素整个外边缘的，没有top、right等子属性 | 可以，支持border-top、border-left等单独设置 |
| 是否影响圆角 | 不会跟随border-radius的圆角，始终是矩形轮廓 | 会跟随border-radius显示圆角效果 |
| 默认值 | none，默认不显示 | 3px medium none，不同浏览器默认值略有差异 |
常见使用场景
1. 表单元素聚焦提示
浏览器默认会给聚焦的表单元素添加outline样式，但是不同浏览器的默认样式不一致，我们可以自定义聚焦时的outline样式，提升交互体验：
/* 自定义输入框聚焦时的轮廓样式 */
input:focus, textarea:focus {
outline: 2px dashed #ff9800;
/* 可选：同时添加边框样式增强提示 */
border-color: #ff9800;
}
2. 元素临时高亮标记
当需要临时标记某个元素的时候，使用outline不会打乱原有布局，非常适合做调试或者临时提示：
/* 高亮类，给需要标记的元素添加该类即可 */
.highlight {
outline: 3px solid #f44336;
}
注意事项
- outline不会响应鼠标事件，即使轮廓覆盖在其他元素上方，点击事件还是会穿透到下方的元素
- outline不支持圆角，即使元素设置了border-radius，outline依然是直角矩形，如果需要圆角轮廓，还是需要使用border属性
- 如果同时设置了outline和border，outline会绘制在border的外侧，不会覆盖border的内容
- 部分旧版本浏览器对outline的某些样式支持不完善，比如IE6不支持outline属性，如果需要兼容旧浏览器，需要谨慎使用
下面是一个完整的HTML示例，展示outline的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>outline使用示例</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #e3f2fd;
border: 1px solid #90caf9;
margin: 20px;
/* 设置元素的外轮廓 */
outline: 3px dotted #1976d2;
}
.box:hover {
/* 鼠标悬浮时修改轮廓样式 */
outline: 3px solid #d32f2f;
}
</style>
</head>
<body>
<div class="box">这是一个带outline轮廓的盒子，鼠标悬浮会修改轮廓样式</div>
</body>
</html>
CSSoutlineoutline_styleoutline_widthoutline_color修改时间：2026-07-19 06:09:36