MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

outline-style

这篇翻译不完整。请帮忙从英语翻译这篇文章

概要

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

An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

It is often more convenient to use the shortcut property outline instead of outline-style, outline-width and outline-color.

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

Syntax

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

Values

<br-style> can be any of the following:

none

No outline (outline-width is 0).
dotted

The outline is a series of dots.
dashed

The outline is a series of short line segments.
solid

The outline is a single line.
double

The outline is two single lines. The outline-width is the sum of the two lines and the space between them.
groove

The outline looks as though it were carved into the canvas.
ridge

The opposite of groove: the outline looks as though it were coming out of the canvas.
inset

The outline makes the box look as though it were embeded in the canvas.
outset

The opposite of inset: the outline makes the box look as though it were coming out of the canvas.

Formal syntax

auto | <br-style>

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

Example 1 - dotted and 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; } 

Example 2 - solid and 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; } 

Example 3 - groove and 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; }

Example 4 - inset and 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; }

Specifications

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

Browser compatibility

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] In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension -moz-outline-style.

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub
 最后编辑者: xgqfrms-GitHub,