目录

CSS outline-style 属性

❮上一节完整的CSS参考下一节❯

示例

设置轮廓样式：

div {outline-style: dotted;}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

轮廓是在元素周围、边框之外绘制的一条线，以使元素"stand out"。

这个outline-style属性指定轮廓的样式。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS2
JavaScript 语法：	对象.style.outlineStyle="dashed"尝试一下

提示和注释

笔记：轮廓不同于边界！与边框不同，轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。此外，轮廓不是元素尺寸的一部分；它是元素尺寸的一部分。元素的总宽度和高度不受轮廓宽度的影响。

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
outline-style	1.0	8.0	1.5	1.2	7.0

CSS 语法

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性值

Value	Description	Demo
none	Specifies no outline. This is default	Demo ❯
hidden	Specifies a hidden outline	Demo ❯
dotted	Specifies a dotted outline	Demo ❯
dashed	Specifies a dashed outline	Demo ❯
solid	Specifies a solid outline	Demo ❯
double	Specifies a double outliner	Demo ❯
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value	Demo ❯
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value	Demo ❯
inset	Specifies a 3D inset outline. The effect depends on the outline-color value	Demo ❯
outset	Specifies a 3D outset outline. The effect depends on the outline-color value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

虚线轮廓：

div {outline-style: dashed;}

亲自试一试 »

示例

坚实的轮廓：

div {outline-style: solid;}

亲自试一试 »

示例

双轮廓：

div {outline-style: double;}

亲自试一试 »

示例

凹槽轮廓：

div {
    outline-style: groove;
    outline-color: coral;
    outline-width: 7px;
}

亲自试一试 »

示例

山脊轮廓：

div {
    outline-style: ridge;
    outline-color: coral;
    outline-width: 7px;
}

亲自试一试 »

示例

插图轮廓：

div {
    outline-style: inset;
    outline-color: coral;
    outline-width: 7px;
}

亲自试一试 »

示例

开头外轮廓：

div {
    outline-style: outset;
    outline-color: coral;
    outline-width: 7px;
}

亲自试一试 »

示例

使用不同的值设置轮廓的样式：

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;}

亲自试一试 »

相关页面

CSS教程：CSS 外轮廓

CSS 参考：外轮廓属性

HTML DOM 参考：轮廓样式属性

❮上一节完整的CSS参考下一节❯