CSS - outline-width 屬性

CSS **outline-width** 屬性定義元素周圍輪廓的寬度。輪廓是在元素邊框外繪製的一條線。

語法

outline-width: medium | thin | thick | length | initial | inherit;

屬性值

值	描述
medium	設定中等寬度的輪廓。預設值。
thin	設定細輪廓。
thick	設定粗邊框。
length	輪廓厚度以長度單位給出（例如 px、em、rem 等）。
initial	將屬性設定為其預設值。
inherit	從父元素繼承此屬性。

CSS 輪廓寬度屬性示例

以下示例使用不同的值解釋了 **outline-width** 屬性。

使用長度值的輪廓寬度屬性

可以使用長度單位（例如 px、em、rem 等）設定元素輪廓的寬度。在以下示例中，使用了 'px' 和 'em' 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
      }

      .ex1 {
         outline-width: 6px;
      }

      .ex2 {
         outline-width: 1em;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: 6px
   </h4>
   <div class="example ex1">
      This div has outline-width: 6px 
   </div>
   <h4>
      outline-width: 1em
   </h4>
   <div class="example ex2">
      This div has outline-width: 1em 
   </div>
</body>

</html>

使用 thin 值的輪廓寬度屬性

要將元素輪廓的寬度設定為細寬度，我們使用 **thin** 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thin
   </h4>
   <div class="example">
      This div has outline-width: thin 
   </div>
</body>

</html>

使用 medium 值的輪廓寬度屬性

要將元素輪廓的寬度設定為中等寬度，我們使用 **medium** 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: medium
   </h4>
   <div class="example">
      This div has outline-width: medium
   </div>
</body>

</html>

使用 thick 值的輪廓寬度屬性

要將元素輪廓的寬度設定為粗寬度，我們使用 **thick** 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thick
   </h4>
   <div class="example">
      This div has outline-width: thick
   </div>
</body>

</html>

支援的瀏覽器

屬性
outline-width	1.0	8.0	1.5	1.2	7.0

css_properties_reference.htm

列印頁面