此页面由社区从英文翻译而来。了解更多并加入 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>
<outline-line-style> =
none|
auto|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
示例
dotted 和dashed
HTML
html
<div> <div> <p>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> <p>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> <p>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> <p>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 |