outline-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

概要

outline-style CSS 属性被用于设置一个元素轮廓的样式。

元素轮廓是绘制于元素周围的一条线,位于border的外围,使元素突出

大多时候使用outline而不是 outline-style, outline-widthoutline-color 会更方便。

初始值none
适用元素所有元素
是否是继承属性
计算值as specified
动画类型按计算值的类型

语法

css
/* 关键字 值 */
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;

/* 全局 值*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;

取值

<br-style> 可为以下这些值:

none

无轮廓 (outline-width0).

dotted

轮廓为一系列点。

dashed

轮廓为一系列短线。

solid

轮廓为实线。

double

轮廓为两根有空隙的线。outline-width 为线与空间的总和。

groove

轮廓呈凹下状。

ridge

groove 相反:轮廓呈凸起状。

inset

轮廓呈嵌入状。

outset

inset 相反:轮廓呈突出状。

正式语法

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

示例

dotteddashed

HTML

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

CSS

css
.dotted {
  outline-style: dotted; /* 于 "outline: dotted"等价 */
}
.dashed {
  outline-style: dashed;
}

/* 让效果更清楚 */
* {
  outline-width: 10px;
  padding: 15px;
}

soliddouble

HTML

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

CSS

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

/* 让效果更清楚 */
* {
  outline-width: 10px;
  padding: 15px;
}

grooveridge

HTML

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

CSS

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

/* 让效果更清楚 */
* {
  outline-width: 10px;
  padding: 15px;
}

insetoutset

HTML

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

CSS

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

/* 让效果更清楚 */
* {
  outline-width: 10px;
  padding: 15px;
}

规范

Specification
CSS Basic User Interface Module Level 4
# outline-style

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-style
auto
dashed
dotted
double
groove
inset
none
outset
ridge
solid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.