CSS outline-style 属性
下面有更多实例。
定义和用法
outline-style 属性用于设置元素的整个轮廓的样式。
（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
| 默认值: | none |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.outlineStyle="dashed" 测试一下 |
提示和注释
注释: 轮廓与 borders 边框不同！ 与边框不同，轮廓绘制在元素边框之外，并且可能与其他内容重叠。此外，轮廓不是元素尺寸的一部分；元素的总宽度和高度不受轮廓宽度的影响。
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
语法
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| none | 默认。定义无轮廓。 | 亲自试一试 » |
| hidden | 定义隐藏的轮廓 | 亲自试一试 » |
| dotted | 定义点状的轮廓。 | 亲自试一试 » |
| dashed | 定义虚线轮廓。 | 亲自试一试 » |
| solid | 定义实线轮廓。 | 亲自试一试 » |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 | 亲自试一试 » |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 | 亲自试一试 » |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 | 亲自试一试 » |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 | 亲自试一试 » |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 | 亲自试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | 亲自试一试 » |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
使用不同的值设置轮廓的样式:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
亲自试一试 »
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
相关页面
CSS 教程: CSS Outline
CSS 参考手册: outline 属性
HTML DOM 参考手册: outlineStyle 属性
