CSS - outline-color 属性



CSS 的 outline-color 属性设置元素周围轮廓的颜色。轮廓是在元素边框周围绘制的一条线。在使用此属性之前,必须定义 outline-style 属性。

语法

outline-color: color | initial | inherit;

属性值

描述
颜色 它设置轮廓的颜色。可以使用不同的格式(例如颜色名称、rgb、hsl、hex 等)。
initial 它将属性设置为其默认值。
inherit 它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 轮廓颜色属性示例

以下示例使用不同的值解释了 outline-color 属性。

使用颜色名称的轮廓颜色属性

可以使用颜色名称(例如 red、yellow、gray 等)设置元素轮廓的颜色。以下示例中使用了一些颜色名称来设置元素的轮廓颜色。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .props { padding: 15px; text-align: center; font-size: 20px; background-color: lightblue; border: 4px dashed black; outline-width: 5px; outline-style: solid; } .first { outline-color: red; } .second { outline-color: blue; } .third { outline-color: green; } </style> </head> <body> <h2> CSS outline-color property </h2> <h4> outline-color: red </h4> <p class="first props"> This paragraph has a black border and red outline. </p> <h4> outline-color: blue </h4> <p class="second props"> This paragraph has a black border and blue outline. </p> <h4> outline-color: green </h4> <p class="third props"> This paragraph has a black border and green outline. </p> </body> </html>

使用十六进制值的轮廓颜色属性

可以使用十六进制值(例如 #26734d)设置元素轮廓的颜色。以下示例中使用了一些十六进制值来设置元素的轮廓颜色。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .props { padding: 15px; text-align: center; font-size: 20px; background-color: lightblue; border: 4px dashed black; outline-width: 5px; outline-style: solid; } .first { outline-color: #00b300; } .second { outline-color: #cc0000; } .third { outline-color: #cccc00; } </style> </head> <body> <h2> CSS outline-color property </h2> <h4> outline-color: #00b300 </h4> <p class="first props"> This paragraph has a black border and greenish outline. </p> <h4> outline-color: #cc0000 </h4> <p class="second props"> This paragraph has a black border and redish outline. </p> <h4> outline-color: #cccc0 </h4> <p class="third props"> This paragraph has a black border and yellowish outline. </p> </body> </html>

使用 RGB 值的轮廓颜色属性

可以使用 rgb 值(例如 rgb(38, 115, 77))设置元素轮廓的颜色。以下示例中使用了一些 rgb 值来设置元素的轮廓颜色。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .props { padding: 15px; text-align: center; font-size: 20px; background-color: lightblue; border: 4px dashed black; outline-width: 5px; outline-style: solid; } .first { outline-color: rgb(230, 0, 115); } .second { outline-color: rgb(255, 153, 0); } .third { outline-color: rgb(102, 0, 204); } </style> </head> <body> <h2> CSS outline-color property </h2> <h4> outline-color: rgb(230, 0, 115) </h4> <p class="first props"> This paragraph has a black border and pinkish outline. </p> <h4> outline-color: rgb(255, 153, 0) </h4> <p class="second props"> This paragraph has a black border and orange outline. </p> <h4> outline-color: rgb(102, 0, 204) </h4> <p class="third props"> This paragraph has a black border and violet outline. </p> </body> </html>

使用 HSL 值的轮廓颜色属性

可以使用 hsl 值(例如 hsl(150, 50%, 30%))设置元素轮廓的颜色。以下示例中使用了一些 hsl 值来设置元素的轮廓颜色。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .props { padding: 15px; text-align: center; font-size: 20px; background-color: lightblue; border: 4px dashed black; outline-width: 5px; outline-style: solid; } .first { outline-color: hsl(240, 20%, 45%); } .second { outline-color: hsl(60, 100%, 25%); } .third { outline-color: hsl(150, 50%, 30%); } </style> </head> <body> <h2> CSS outline-color property </h2> <h4> outline-color: hsl(240, 20%, 45%) </h4> <p class="first props"> This paragraph has a black border and blueish outline. </p> <h4> outline-color: hsl(60, 100%, 25%) </h4> <p class="second props"> This paragraph has a black border and greenish outline. </p> <h4> outline-color: hsl(150, 50%, 30%) </h4> <p class="third props"> This paragraph has a black border and grayish outline. </p> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
outline-color 1.0 8.0 1.5 1.2 7.0
css_properties_reference.htm
广告