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

列印頁面