CSS - outline 屬性

CSS 的 **outline** 屬性在元素邊框外部繪製一條線。它是一個簡寫屬性，用於在一個語句中定義以下屬性的值： outline-width、 outline-style 和 outline-color。必須定義 **outline-style**。如果未指定，則將使用其他屬性的預設值。

語法

outline: outline-width outline-style outline-color | initial | inherit;

屬性值

值	描述
outline-width	它設定元素輪廓的寬度。
outline-style	它設定元素輪廓的樣式。
outline-color	它設定元素輪廓的顏色。可以使用不同的格式（例如命名顏色、十六進位制值、rgb 值、hsl 值等）。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Outline 屬性示例

以下示例說明了 **outline** 屬性。

定義 Outline 屬性的所有值

**outline** 屬性是定義輪廓的三個屬性的簡寫：**outline-width**、**outline-style** 和 **outline-color**。要在單個語句中設定所有這些值，我們提供三個值。在這三個值中，樣式是必須的。如果未指定，則將應用顏色和寬度的預設值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;
         border: 4px solid black;
      }

      #first {
         outline: 7px dotted green;
      }

      #second {
         outline: 9px double green;
      }

      #third {
         outline: 5px dashed green;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline: 7px dotted green
   </h4>
   <p id="first">
      This paragraph has border: 4px solid 
      black and outline: 7px dotted green.
   </p>
   <h4>
      outline: 9px double green
   </h4>
   <p id="second">
      This paragraph has border: 4px solid 
      black and outline: 9px double green.
   </p>
   <h4>
      outline: 5px dashed green
   </h4>
   <p id="third">
      This paragraph has border: 4px solid 
      black and outline: 5px dashed green.
   </p>
</body>

</html>

Outline 屬性的組成屬性

**outline** 屬性是 **outline-width**、**outline-style** 和 **outline-color** 的簡寫屬性。這些屬性可以組合使用以產生與僅使用 **outline** 屬性產生的相同效果。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;

         border: 4px solid black;
         outline-width: 7px;
         outline-style: dashed;
         outline-color: red;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline-width: 7px, outline-style: 
      dashed, outline-color: red
   </h4>
   <p>
      This paragraph has border: 4px solid 
      black and outline: 7px dashed red.
   </p>
</body>

</html>

支援的瀏覽器

屬性
outline	1.0	8.0	1.5	1.2	7.0

css_properties_reference.htm

列印頁面