我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

Syntax

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

The outline-style property is specified as any one of the values listed below.

Values

auto

Permits the user agent to render a custom outline style.

none

No outline is used. The 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 page.

ridge

The opposite of groove: the outline looks as though it were extruded from the page.

inset

The outline makes the box look as though it were embedded in the page.

outset

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

Formal syntax

auto | <br-style>

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

Examples

Example 0 - auto

The auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow.

HTML

<div>
  <p class="auto">Outline Demo</p>
</div> 

CSS

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

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

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
The definition of 'outline-style' in that specification.
Recommendation Added auto value.
CSS Level 2 (Revision 1)
The definition of 'outline-style' in that specification.
Recommendation Initial definition.

Initial valuenone
Applies toall elements
Inheritedno
Mediaas each of the properties of the shorthand:
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support112

1.5

1 — 3.6 -moz-

871.2
auto ? No ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 ? Yes46123.2 ?
auto ? ? No ? ? ? ?

文件標籤與貢獻者

最近更新: chharvey,