outline-style - CSS（层叠样式表） 编辑

概要

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

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

大多时候使用outline而不是outline-style,outline-width 和 outline-color会更方便.

初始值	none
适用元素	all elements
是否是继承属性	否
计算值	as specified
Animation type	discrete

语法

/* 关键字 值 */
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-width 为0).

dotted

轮廓为一系列点.

dashed

轮廓为一系列短线.

solid

轮廓为实线.

double

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

groove

轮廓呈凹下状.

ridge

与groove相反: 轮廓呈凸起状.

inset

轮廓呈嵌入状.

outset

与inset相反: 轮廓呈突出状.

正式语法

auto | <'border-style'>

示例 1  dotted 和 dashed

HTML

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

CSS

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

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

示例 2 - solid 和 double

HTML

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

CSS

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

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

示例 3 - groove 和 ridge

HTML

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

CSS

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

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

示例 4 - inset 和 outset

HTML

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

CSS

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

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

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3 outline-style	Recommendation	Added auto value
CSS Level 2 (Revision 1) outline-style	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.5 (1.8)[1]	8.0	7.0	1.2 (125)
auto	?	未实现	?	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	46.0 (46)	10	12	3.2
auto	?	未实现	?	?	?	?

[1] Gecko 1.8及以前 (Firefox 1.5) 该效果可用Mozilla CSS Extension 实现-moz-outline-style.