CSS outline-color 属性-之路教程

CSS outline-color 属性值说明

值	描述
invert	反转应用于背景的任何颜色。此值可确保大纲的可见性，无论背景颜色如何。这是此属性的默认值。
color	定义大纲颜色。可以使用颜色名称，十六进制颜色代码，RGB（），RGBA（），HSL（），HSLA（）。
initial	将属性设置为默认值。
inherit	从其父元素继承属性。

语法

outline-color: invert | color | initial | inherit;

轮廓颜色属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color 属性示例</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

十六进制、RGB、RGBA、HSL、HSLA 颜色的轮廓颜色属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      .p2 {
        outline-style: solid;
        outline-color: hsl(65, 100%, 50%);
      }
      .p3 {
        outline-style: solid;
        outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4 {
        outline-style: solid;
        outline-color: rgb( 224, 0, 0);
      }
      .p5 {
        outline-style: solid;
        outline-color: rgba(204, 204, 204, 1);
      }
    </style>
  </head>
  <body>
    <h2>Outline-color 属性示例</h2>
	<p class=“p1”>这是一个带有十六进制蓝色轮廓的段落</p>
<p class=“p2”>这是一个带有hsl黄色轮廓的段落</p>
<p class=“p3”>这是一个带有hsla绿色轮廓的段落</p>
<p class=“p4”>这是一个带有rgb红色轮廓的段落</p>
<p class=“p5”>这是一个带有rgba灰色轮廓的段落</p>
  </body>
</html>

CSS outline-color 属性

轮廓颜色属性定义轮廓的颜色。

轮廓是围绕元素绘制的一条线。
但它与边界属性不同。

元素的宽度和高度属性不包括轮廓宽度，因为轮廓不被视为元素尺寸的一部分。

如果单独使用该属性，则该属性不起作用。
它必须与大纲或者大纲样式属性一起使用。

十六进制、RGB、RGBA、HSL、HSLA 或者颜色名称可以设置为轮廓颜色属性的值。
请参阅 HTML 颜色部分中的颜色值。

初始值	invert
应用于	所有元素。
继承	无效
可动画的	是的。颜色是有动画的。
版本	CSS2.
DOM 语法	object.Style.outLineColor =“#8EBF42”;

日期：2020-06-02 22:14:42 来源：oir作者：oir

←CSS :out-of-range伪类

CSS 轮廓偏移属性→

CSS outline-color 属性值说明

语法

轮廓颜色属性示例：

十六进制、RGB、RGBA、HSL、HSLA 颜色的轮廓颜色属性示例：

目录