目录

CSS outline 属性


示例

设置 <h2> 元素和 <div> 元素周围的轮廓:

h2 {
  outline: 5px dotted green;
}

div.a {
  outline: 2px dashed blue;
}
亲自试一试 »

定义和用法

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

这个outlineproperty 是以下属性的简写:

如果省略轮廓颜色,则应用的颜色将是文本的颜色。

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

展示演示❯

默认值: 中反转颜色
遗传:
可动画: 是的,查看各个属性阅读可动画的尝试一下
版本: CSS2
JavaScript 语法: 对象.style.outline="#0000FF dotted 5px"尝试一下

浏览器支持

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

Property
outline 1.0 8.0 1.5 1.2 7.0


CSS 语法

outline: outline-width outline-style outline-color|initial|inherit;

属性值

Value Description Demo
outline-width Specifies the width of outline 尝试一下 »
outline-style Specifies the style of the outline 尝试一下 »
outline-color Specifies the color of the outline 尝试一下 »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

相关页面

CSS教程:CSS 外轮廓

HTML DOM 参考:外轮廓属性