此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
outline-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
概要
outline-style CSS 属性被用于设置一个元素轮廓的样式。
元素轮廓是绘制于元素周围的一条线,位于border的外围,使元素突出
大多时候使用outline而不是 outline-style, outline-width 和 outline-color 会更方便。
语法
css
/* 关键字 值 */
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> 可为以下这些值:
正式语法
outline-style =
auto |
<outline-line-style>
示例
dotted 和 dashed
HTML
html
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
CSS
css
.dotted {
outline-style: dotted; /* 于 "outline: dotted"等价 */
}
.dashed {
outline-style: dashed;
}
/* 让效果更清楚 */
* {
outline-width: 10px;
padding: 15px;
}
[フレーム]
solid 和 double
HTML
html
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
CSS
css
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* 让效果更清楚 */
* {
outline-width: 10px;
padding: 15px;
}
[フレーム]
groove 和 ridge
HTML
html
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
CSS
css
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* 让效果更清楚 */
* {
outline-width: 10px;
padding: 15px;
}
[フレーム]
inset 和 outset
HTML
html
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
CSS
css
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* 让效果更清楚 */
* {
outline-width: 10px;
padding: 15px;
}
[フレーム]
规范
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |
浏览器兼容性
Loading...