CSS - outline-color 属性

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

语法

outline-color: color | initial | inherit;

属性值

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

CSS 轮廓颜色属性示例

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

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

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

示例

<!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）设置元素轮廓的颜色。以下示例中使用了一些十六进制值来设置元素的轮廓颜色。

示例

<!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 值来设置元素的轮廓颜色。

示例

<!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 值来设置元素的轮廓颜色。

示例

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

支持的浏览器

属性
outline-color	1.0	8.0	1.5	1.2	7.0

css_properties_reference.htm

打印页面