CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。可以通过以下方式设置颜色：

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框：

红色的实线轮廓。

蓝色的点状轮廓。

灰色的凸边轮廓。

<!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>

运行一下

HEX 值

您也可以使用十六进制值（HEX）指定轮廓颜色：

<!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>

运行一下

RGB 值

或者通过使用 RGB 值：

<!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>

运行一下

HSL 值

您还可以使用 HSL 值：

<!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>

运行一下

您可以访问本站的 CSS 颜色章节中学习有关 HEX、RGB 和 HSL 值的更多知识。

反转颜色

下例使用 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>

运行一下

CSS 轮廓颜色

CSS 轮廓颜色

HEX 值

RGB 值

HSL 值

反转颜色

分类导航