outline-style

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

试一试

outline-style: none;

outline-style: dotted;

outline-style: solid;

outline-style: groove;

outline-style: inset;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

在定义轮廓外观时，通常使用简写属性 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;
}

结果

将轮廓样式设置为虚线和点线

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;
}

结果

将轮廓样式设置为实线和双线

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 Basic User Interface Module Level 4 # outline-style

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题