css的outline-style属性用于定义元素轮廓线的样式，轮廓是绘制在元素边框之外的一圈线条，不会占据页面布局空间，和border属性有明显区别。该属性是outline简写属性的组成部分之一，单独使用时可以精准控制轮廓的显示风格。
outline-style属性基础语法
outline-style属性的语法格式非常简单，支持给所有可见的HTML元素设置，默认值为none，也就是不显示轮廓。它的基本写法如下：
/* 基础语法 */
selector {
outline-style: value;
}
其中value为outline-style支持的取值，所有可选值都是关键字类型，不支持自定义数值。
outline-style可选取值说明
outline-style支持的取值可以分为显示类和不显示类，具体含义如下表所示：
| 取值 | 说明 |
|---|---|
| none | 默认值，不显示任何轮廓线 |
| hidden | 隐藏轮廓线，效果和none类似，但在表格元素中处理轮廓冲突时逻辑不同 |
| dotted | 轮廓线为点状 |
| dashed | 轮廓线为虚线 |
| solid | 轮廓线为实线 |
| double | 轮廓线为双线，双线宽度等于outline-width设置的值 |
| groove | 轮廓线为3D凹槽效果，效果取决于outline-color的值 |
| ridge | 轮廓线为3D凸槽效果，效果取决于outline-color的值 |
| inset | 轮廓线为3D内嵌效果，效果取决于outline-color的值 |
| outset | 轮廓线为3D外凸效果，效果取决于outline-color的值 |
使用示例
下面通过具体的代码示例展示不同outline-style取值的实际效果，代码中会同时设置outline-width和outline-color，方便观察轮廓样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>outline-style使用示例</title>
<style>
.base {
width: 200px;
height: 60px;
margin: 20px;
outline-width: 3px;
outline-color: #ff5500;
}
.solid-outline {
outline-style: solid;
}
.dashed-outline {
outline-style: dashed;
}
.dotted-outline {
outline-style: dotted;
}
.double-outline {
outline-style: double;
}
</style>
</head>
<body>
<div class="base solid-outline">实线轮廓</div>
<div class="base dashed-outline">虚线轮廓</div>
<div class="base dotted-outline">点状轮廓</div>
<div class="base double-outline">双线轮廓</div>
</body>
</html>
使用注意事项
- outline-style设置为none时，即使同时设置了outline-width和outline-color，也不会显示轮廓，因为样式是轮廓显示的前提。
- 轮廓不会占据页面布局空间，修改outline-style不会影响元素本身的位置和其他元素的排列，这和border属性有本质区别。
- outline-style不支持单独设置某一边的轮廓样式，如果要给元素不同边设置不同轮廓，需要使用border相关属性替代。
- 3D类取值（groove、ridge、inset、outset）的显示效果受outline-color影响，不同颜色下3D效果的差异会比较明显。
常见应用场景
outline-style最常见的使用场景是自定义元素获取焦点时的轮廓样式，默认情况下，可交互元素（比如<input>、<button>）获取焦点时会显示浏览器默认的轮廓，我们可以通过outline-style调整其样式：
/* 自定义输入框聚焦时的轮廓样式 */
input:focus {
outline-style: solid;
outline-width: 2px;
outline-color: #1677ff;
}
需要注意的是，不要随意将outline-style设置为none来去除默认聚焦轮廓，这样会导致键盘导航用户无法感知当前聚焦的元素，影响页面的可访问性。如果确实需要去除默认轮廓，要额外添加其他明显的聚焦状态样式作为替代。
cssoutline-styleoutline前端样式修改时间：2026-07-17 22:54:29