CSS 轮廓颜色 详解
css3基础 2022-05-23 12:02:5325小码哥的IT人生shichen
CSS 轮廓颜色
CSS 轮廓颜色
outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色：
- name - 指定颜色名，比如 "red"
- HEX - 指定十六进制值，比如 "#ff0000"
- RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
- HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
- invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框：
红色的实线轮廓。
蓝色的点状轮廓。
灰色的凸边轮廓。
示例代码：
p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: blue; } p.ex3 { border: 2px solid black; outline-style: outset; outline-color: grey; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: blue; } p.ex3 { border: 2px solid black; outline-style: outset; outline-color: grey; } </style> </head> <body> <h1>outline-color 属性</h1> <p>outline-color 属性用于设置轮廓的颜色。</p> <p class="ex1">红色的实线轮廓。</p> <p class="ex2">蓝色的点状轮廓。</p> <p class="ex3">灰色的实线轮廓。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HEX 值
您也可以使用十六进制值（HEX）指定轮廓颜色：
示例代码：
p.ex1 { outline-style: solid; outline-color: #ff0000; /* 红色 */ }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: #ff0000; /* red */ } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: #0000ff; /* blue */ } p.ex3 { border: 2px solid black; outline-style: solid; outline-color: #bbbbbb; /* grey */ } </style> </head> <body> <h1>outline-color 属性</h1> <p>也可以使用十六进制值（HEX）规定轮廓颜色：</p> <p class="ex1">红色的实线轮廓。</p> <p class="ex2">蓝色的点状轮廓。</p> <p class="ex3">灰色的实线轮廓。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
RGB 值
或者通过使用 RGB 值：
示例代码：
p.ex1 { outline-style: solid; outline-color: rgb(255, 0, 0); /* 红色 */ }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: rgb(255, 0, 0); /* red */ } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: rgb(0, 0, 255); /* blue */ } p.ex3 { border: 2px solid black; outline-style: solid; outline-color: rgb(187, 187, 187); /* grey */ } </style> </head> <body> <h1>outline-color 属性</h1> <p>也可以使用 RGB 值规定轮廓颜色：</p> <p class="ex1">红色的实线轮廓。</p> <p class="ex2">蓝色的点状轮廓。</p> <p class="ex3">灰色的实线轮廓。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HSL 值
您还可以使用 HSL 值：
示例代码：
p.ex1 { outline-style: solid; outline-color: hsl(0, 100%, 50%); /* 红色 */ }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 2px solid black; outline-style: solid; outline-color: hsl(0, 100%, 50%); /* red */ } p.ex2 { border: 2px solid black; outline-style: dotted; outline-color: hsl(240, 100%, 50%); /* blue */ } p.ex3 { border: 2px solid black; outline-style: solid; outline-color: hsl(0, 0%, 73%); /* grey */ } </style> </head> <body> <h1>outline-color 属性</h1> <p>也可以使用 HSL 值规定轮廓颜色：</p> <p class="ex1">红色的实线轮廓。</p> <p class="ex2">蓝色的点状轮廓。</p> <p class="ex3">灰色的实线轮廓。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以在我们的 CSS 颜色 章节中学习有关 HEX、RGB 和 HSL 值的更多知识。
反转颜色
下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：
反转颜色的实线轮廓。
示例代码：
p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; } </style> </head> <body> <h1>使用 outline-color:invert</h1> <p class="ex1">invert 实线轮廓</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
