css的outline属性是绘制在元素周围的一条线，位于边框边缘的外围，主要用于突出元素，比如表单输入框获取焦点时的高亮效果。它和border属性都属于元素的视觉装饰属性，但两者的特性和使用场景有明显差异。
outline属性的基础用法
outline是复合属性，可以一次性设置轮廓的宽度、样式、颜色，也可以单独设置对应子属性。它的语法格式如下：
/* 复合属性写法 */ outline: outline-width outline-style outline-color; /* 单独子属性 */ outline-width: thin | medium | thick | <length>; /* 轮廓宽度 */ outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset; /* 轮廓样式 */ outline-color: <color> | invert; /* 轮廓颜色，invert表示和背景色反转 */
下面是一个简单的outline使用示例，给按钮添加鼠标悬停时的轮廓效果：
.btn {
padding: 8px 16px;
border: 1px solid #ccc;
background: #fff;
}
.btn:hover {
outline: 2px solid #409eff; /* 悬停时显示蓝色实线轮廓 */
}
outline和border的核心区别
虽然两者都能给元素添加外围装饰，但在多个维度上存在明显不同，具体对比如下：
| 对比维度 | outline属性 | border属性 |
|---|---|---|
| 是否影响盒模型 | 不占用元素布局空间，不会影响元素宽高和周围元素的位置 | 属于盒模型的一部分，会占用元素布局空间，增加元素的总宽高 |
| 是否可单独设置单边 | 不能单独设置某一条边的轮廓，只能统一设置四边 | 可以单独设置上、下、左、右任意一条边的边框，比如border-top |
| 是否有圆角属性 | 不支持border-radius，轮廓始终是矩形，不会跟随元素的圆角变化 | 支持border-radius，可以设置圆角边框，跟随元素的圆角样式 |
| 默认显示场景 | 默认不显示，通常用于交互高亮、元素聚焦等临时提示场景 | 默认不显示，常用于元素的基础装饰、分割线等长期存在的样式场景 |
实例对比演示
下面通过一个具体的代码实例，直观展示两者的差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
height: 100px;
margin: 20px;
background: #f5f5f5;
}
.border-demo {
border: 3px solid #f00; /* 红色边框 */
}
.outline-demo {
outline: 3px solid #00f; /* 蓝色轮廓 */
}
.radius-demo {
border-radius: 20px;
border: 3px solid #f00;
outline: 3px solid #00f;
}
</style>
</head>
<body>
<div class="box border-demo">我是带边框的盒子</div>
<div class="box outline-demo">我是带轮廓的盒子</div>
<div class="box radius-demo">我是带圆角的盒子</div>
</body>
</html>
运行上述代码可以看到：带边框的盒子整体宽高变成了206px（200+3*2），周围的其他元素会被它挤开；带轮廓的盒子宽高仍然是200px，不会影响周围布局；带圆角的盒子边框会跟随圆角变成圆角，但轮廓依然是直角矩形。
使用场景建议
在实际开发中，可以根据需求选择对应的属性：
- 如果需要给元素添加长期存在的基础装饰、分割线，或者需要单独设置某条边的样式、需要圆角效果，优先使用
border属性。 - 如果需要实现元素聚焦高亮、临时提示效果，或者不想影响元素原有布局，优先使用
outline属性，比如表单输入框的:focus状态就可以用outline来提示用户当前聚焦的元素。
注意：outline属性在部分旧版本浏览器中可能存在兼容性问题，如果需要兼容非常旧的浏览器，建议提前测试对应效果。
css_outlinecss_border轮廓属性边框属性修改时间：2026-07-09 00:57:25