目录

CSS outline-color 属性


示例

设置轮廓颜色:

div {outline-color: coral;}
亲自试一试 »

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


定义和用法

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

这个outline-color属性指定轮廓的颜色。

笔记:始终声明轮廓式之前的属性outline-color属性。在更改元素的颜色之前,该元素必须具有轮廓。

展示演示❯

默认值: 当前颜色
遗传:
可动画: 是的,查看各个属性阅读可动画的尝试一下
版本: CSS2
JavaScript 语法: 对象.style.outlineColor="#FF0000"尝试一下

提示和注释

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


浏览器支持

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

Property
outline-color 1.0 8.0 1.5 1.2 7.0

CSS 语法

outline-color: color|initial|inherit;

属性值

Value Description Demo
color Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. 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-color: #92a8d1;}
亲自试一试 »

示例

使用 RGB 值设置轮廓颜色:

div {outline-color: rgb(201, 76, 76);}
亲自试一试 »

示例

使用 RGBA 值设置轮廓颜色:

div {outline-color: rgba(201, 76, 76, 0.3);}
亲自试一试 »

示例

使用 HSL 值设置轮廓颜色:

div {outline-color: hsl(89, 43%, 51%);}
亲自试一试 »

示例

使用 HSLA 值设置轮廓颜色:

div {outline-color: hsla(89, 43%, 51%, 0.3);}
亲自试一试 »

相关页面

CSS教程:CSS 外轮廓

CSS 参考:外轮廓属性

HTML DOM 参考:轮廓颜色属性