CSS参考手册
扩展 | Extensions
-moz-outline-style
outline-style
CSS属性用于设置元素的外形风格。一个轮廓线是围绕着一个元素在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 |
? |
? |
? |
? |
扩展 | Extensions相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。