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

浏览器兼容性

BCD tables only load in the browser