-moz-outline-style
outline-styleCSS属性用于设置元素的外形风格。一个轮廓线是围绕着一个元素在border外面画的线。
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 |
动画类型 | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该outline-style属性被指定为下面列出的任何一个值。
值
没有使用大纲。outline-width是0.dotted
大纲是一系列dots.dashed
轮廓是一系列的短线segments.solid
轮廓是单一的line.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
