我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
Summary
The outline-style
CSS property is used to set the style of the outline of an element. 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
.
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual, interactive |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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;
Values
<br-style>
can be any of the following:
- none
- No outline (
outline-width
is0
). - 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 The 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 |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8)[1] | 8.0 | 7.0 | 1.2 (125) |
auto |
? | ? | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 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
.