轮廓样式 | outline-style

outline-style

outline-style CSS 属性被用于设置一个元素轮廓的样式。元素轮廓是绘制于元素周围的一条线，位于边框边框的外围，使元素突出

outline在定义大纲外观时，使用简写属性往往更方便。

/* 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: unset;

初始值	none
适用元素	all elements
是否是继承属性	no
适用媒体	visual, interactive
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

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

值

none

没有使用大纲。此outline-width是0.dotted

大纲是一系列dots.dashed

纲要是一系列短线段segments.solid

轮廓是单行.double

轮廓是两条单线。此outline-width两条线的总和和它们之间的距离

大纲看起来好像被雕刻在page.ridge中

与之相反groove：轮廓看起来像是从page.inset中挤出的

大纲使框看起来好像嵌入在page.outset中

与之相反inset：轮廓使框看起来好像是从页面中出来的。

正式语法

auto | <br-style>where 
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

例1 - dotted和dashed

HTML

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

CSS

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

/* To make the Demo clearer */ 
* { 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;
}

/* To make the Demo clearer */ 
* { 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;
}

/* To make the Demo clearer */ 
* { 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;
}

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

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'outline-style' in that specification.	Candidate Recommendation	Added auto value.
CSS Level 2 (Revision 1)The definition of 'outline-style' in that specification.	Recommendation	Initial definition.

浏览器兼容性

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	?	No support	?	?	?	?

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	?	No support	?	?	?	?