outline-style

**outline-style** CSS 属性设置元素轮廓的样式。轮廓是围绕元素绘制的一条线，位于 border 的外部。

尝试一下

在定义轮廓的外观时，使用速记属性 outline 通常更方便。

语法

css
/* 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-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

outline-style 属性被指定为下面列出的任何一个值。

值

auto

允许用户代理呈现自定义轮廓样式。

none

不使用轮廓。 outline-width 为 0。

dotted

轮廓是一系列点。

dashed

轮廓是一系列短线段。

solid

轮廓是一条单线。

double

轮廓是两条单线。 outline-width 是两条线及其间距的总和。

groove

轮廓看起来像是雕刻在页面上的。

ridge

groove 的反面：轮廓看起来像是从页面中挤出的。

inset

轮廓使盒子看起来像是嵌入在页面中的。

outset

inset 的反面：轮廓使盒子看起来像是从页面中突出的。

正式定义

初始值none
适用于所有元素
继承否
计算值如指定
动画类型按计算值类型

正式语法

outline-style = 
  auto                  |
  <outline-line-style>

示例

将轮廓样式设置为 auto

auto 值表示自定义轮廓样式，在 规范 中描述为“通常是平台的用户界面默认样式，或者可能是比 CSS 中详细描述的样式更丰富的样式，例如带有半透明外像素的圆角轮廓，看起来像是发光的”。

HTML

html
<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

css
.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

结果

将轮廓样式设置为 dashed 和 dotted

HTML

html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

css
.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

结果

将轮廓样式设置为 solid 和 double

HTML

html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

结果

将轮廓样式设置为 groove 和 ridge

HTML

html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

结果

将轮廓样式设置为 inset 和 outset

HTML

html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

结果

规范

规范
CSS 基本用户界面模块级别 4
# outline-style

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅