概要

outline-style CSS 属性被用于设置一个元素轮廓的样式。

元素轮廓是绘制于元素周围的一条线,位于border的外围,使元素突出

大多时候使用outline而不是 outline-style, outline-width  outline-color会更方便.

初始值none
适用元素all elements
是否是继承属性
适用媒体as each of the properties of the shorthand:
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 关键字 值 */
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;

/* 全局 值*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;

取值

<br-style> 可为以下这些值:

none

无轮廓 (outline-width 0).
dotted

轮廓为一系列点.
dashed

轮廓为一系列短线.
solid

轮廓为实线.
double

轮廓为两根有空隙的线. outline-width 为线与空间的总和.
groove

轮廓呈凹下状.
ridge

groove相反: 轮廓呈凸起状.
inset

轮廓呈嵌入状.
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; /* 于 "outline: dotted"等价 */
}
.dashed {
  outline-style: dashed;
}

/* 让效果更清楚 */ 
* { 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;
}

/* 让效果更清楚 */ 
* { 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;
}

/* 让效果更清楚 */ 
* { 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;
}

/* 让效果更清楚 */ 
* { outline-width: 10px; padding: 15px; }

规范

Specification Status Comment
CSS Basic User Interface Module Level 3
outline-style
Recommendation Added auto value
CSS Level 2 (Revision 1)
outline-style
Recommendation Initial definition

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support112

1.5

1 — 3.6 -moz-

871.2
auto ? No ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 ? Yes46123.2 ?
auto ? ? No ? ? ? ?

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 ? 未实现 ? ? ? ?
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 ? 未实现 ? ? ? ?

[1] Gecko 1.8及以前 (Firefox 1.5) 该效果可用Mozilla CSS Extension 实现-moz-outline-style.

文档标签和贡献者

标签: 
此页面的贡献者: hhxxhg, Erdoszrf, xgqfrms-GitHub
最后编辑者: hhxxhg,