outline-style

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

outline-style CSS 属性指定元素轮廓的样式。什么是轮廓?轮廓是在元素周围绘制的一条线——位于边框边缘之外——当该元素处于焦点时,用于辅助功能或装饰目的。

button {
  outline-style: dashed;
}

outline-styleoutline 简写中的一个组成属性,并在 CSS 基本用户界面模块级别 4 规范中定义,该规范目前处于编辑草案状态。

用法

我们通常使用简写属性设置元素的轮廓

a:focus {
  outline: 5px dashed black;
}

辅助功能

默认情况下,不同的用户代理在聚焦元素上提供不同的轮廓样式,以帮助指示非鼠标交互以实现辅助功能,但该视觉效果通常对每个人都有益。此样式通常是元素周围的轮廓。

在 Chrome 中,轮廓样式为实线;在 Firefox 中,它是一个较浅的、部分点状的线。

有一些原因会导致您想要更改默认轮廓样式

  • 您可以将该样式设置为与您的品牌相匹配。
  • 您可以使轮廓更醒目。
  • 您可以通过更改元素聚焦时的轮廓样式来吸引用户的更多注意力。

这就是 outline-style 派上用场的时候。**但请确保您的自定义样式至少与默认样式一样易于访问。**这意味着使其清晰且醒目,同时不要试图偏离得太远,以至于不再像焦点状态。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;
A three-by-three grid of boxes that are evenly spaced in white against a gradient that goes from bright orange to dark orange. Each box demonstrates an outline-style property value.
  • auto允许用户代理在元素上绘制自定义轮廓样式。
  • none默认值。不绘制轮廓。outline-width 的计算值为 0
  • dotted在元素周围绘制一堆圆点。
  • dashed在元素周围绘制方角虚线。
  • solid一条单线环绕元素。
  • double沿着元素的边缘绘制两条平行的实线,它们之间留有间隙。两条线的粗细以及它们之间的间隙等于 outline-width 值。outline-width 必须至少为 3px 宽,才能看到双重轮廓。
  • groove轮廓看起来像是雕刻在页面上。这种雕刻效果通常来自使用 outline-color 属性指定的颜色,加上浏览器自行确定的稍暗版本。
  • ridgegroove 的反义词,轮廓看起来像是从页面上凸出来。
  • inset使元素的框看起来像嵌入其中,就像轮廓内的内容正在沉入页面一样。
  • outsetinset 的反义词,使元素的框看起来像浮雕,就像轮廓内的内容正在从页面上凸出来一样。
  • initial应用属性的默认设置,即 none
  • inherit采用父元素的 outline-style 值。
  • unset从元素中移除当前的 outline-style

示例

以下示例在按钮获得焦点后使其轮廓变为双线

button {
  outline-width: 1px;
  outline-style: solid;
  outline-color: lightblue;
}

button:focus {
  outline-style: double;
}

演示

您可以在以下演示中尝试此属性

浏览器支持

IEEdgeChromeFirefoxSafariOpera
8+全部全部全部全部全部
iOS SafariAndroid ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
全部全部全部全部全部
来源:caniuse

更多文档

CSS技巧!