DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
outline-style
CSS 属性指定元素轮廓的样式。什么是轮廓?轮廓是在元素周围绘制的一条线——位于边框边缘之外——当该元素处于焦点时,用于辅助功能或装饰目的。
button {
outline-style: dashed;
}
outline-style
是 outline
简写中的一个组成属性,并在 CSS 基本用户界面模块级别 4 规范中定义,该规范目前处于编辑草案状态。
用法
我们通常使用简写属性设置元素的轮廓
a:focus {
outline: 5px dashed black;
}
辅助功能
默认情况下,不同的用户代理在聚焦元素上提供不同的轮廓样式,以帮助指示非鼠标交互以实现辅助功能,但该视觉效果通常对每个人都有益。此样式通常是元素周围的轮廓。

有一些原因会导致您想要更改默认轮廓样式
- 您可以将该样式设置为与您的品牌相匹配。
- 您可以使轮廓更醒目。
- 您可以通过更改元素聚焦时的轮廓样式来吸引用户的更多注意力。
这就是 outline-styl
e 派上用场的时候。**但请确保您的自定义样式至少与默认样式一样易于访问。**这意味着使其清晰且醒目,同时不要试图偏离得太远,以至于不再像焦点状态。Eric Bailey 在他的 “聚焦于焦点样式” 文章中提供了很多关于此方面的宝贵建议。
语法
outline-style: auto | <outline-line-style>
/* where */
<outline-line-style> = none | dotted | dashed | solid | double | groove | ridge | inset | outset
- 初始值:
none
- 应用于:所有元素
- 继承:否
- 计算值:如指定
- 动画类型:离散
值
/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;

auto
:允许用户代理在元素上绘制自定义轮廓样式。none
:默认值。不绘制轮廓。outline-width
的计算值为0
。dotted
:在元素周围绘制一堆圆点。dashed
:在元素周围绘制方角虚线。solid
:一条单线环绕元素。double
:沿着元素的边缘绘制两条平行的实线,它们之间留有间隙。两条线的粗细以及它们之间的间隙等于outline-width
值。outline-width
必须至少为 3px 宽,才能看到双重轮廓。groove
:轮廓看起来像是雕刻在页面上。这种雕刻效果通常来自使用outline-color
属性指定的颜色,加上浏览器自行确定的稍暗版本。ridge
:groove
的反义词,轮廓看起来像是从页面上凸出来。inset
:使元素的框看起来像嵌入其中,就像轮廓内的内容正在沉入页面一样。outset
:inset
的反义词,使元素的框看起来像浮雕,就像轮廓内的内容正在从页面上凸出来一样。initial
:应用属性的默认设置,即none
。inherit
:采用父元素的outline-style
值。unset
:从元素中移除当前的outline-style
。
示例
以下示例在按钮获得焦点后使其轮廓变为双线
button {
outline-width: 1px;
outline-style: solid;
outline-color: lightblue;
}
button:focus {
outline-style: double;
}
演示
您可以在以下演示中尝试此属性
浏览器支持
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
8+ | 全部 | 全部 | 全部 | 全部 | 全部 |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 |