轮廓样式 | 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 | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
