CSS参考手册
基本用户界面 | Basic User Interface
轮廓样式 | 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 |
? |
? |
? |
? |
基本用户界面 | Basic User Interface相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。