outline-color
属性用于设置轮廓的颜色。
颜色可以通过以下方式设置:
name - 指定颜色名称,例如“red”
HEX - 指定十六进制值,例如“#ff0000”
RGB - 指定 RGB 值,例如“rgb(255,0,0)”
HSL - 指定 HSL 值,例如“hsl(0, 100%, 50%)”
反转 - 执行颜色反转(这确保轮廓可见,无论颜色背景如何)
以下示例显示了一些具有不同颜色的不同轮廓。 另请注意,这些元素的轮廓内还有一个细黑色边框:
A solid red outline.
A dotted blue outline.
An outset grey outline.
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>
<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>
</body>
</html>
轮廓颜色也可以使用十六进制值 (HEX) 指定:
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
自己尝试一下→
<!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>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>
</body>
</html>
或者使用 RGB 值:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
自己尝试一下 →
<!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>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>
</body>
</html>
您还可以使用 HSL 值:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
自己尝试一下 →
<!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>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>
</body>
</html>
您可以在我们的 CSS 颜色章节中了解有关 HEX、RGB 和 HSL 值的更多信息。