CSS - outline-style 屬性

上一頁
下一頁

CSS 的 **outline-color** 屬性決定元素周圍輪廓的樣式。輪廓是在元素邊框周圍繪製的一條線。

語法

outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

屬性值

值 描述
none 指定沒有輪廓。預設值。
hidden 指定隱藏的輪廓。
dotted 指定點狀輪廓。
dashed 指定虛線輪廓。
solid 指定實線輪廓。
double 指定雙線輪廓。
groove 指定 3D 凹槽輪廓。效果取決於 outline-color 值。
ridge 指定 3D 凸起輪廓。效果取決於 outline-color 值。
inset 指定 3D 內嵌輪廓。效果取決於 outline-color 值。
outset 指定 3D 外凸輪廓。效果取決於 outline-color 值。
initial 將屬性設定為預設值。
inherit 從父元素繼承該屬性。

CSS 輪廓樣式屬性示例

以下示例說明了使用不同值的 **outline-style** 屬性。

使用 None 值的輪廓樣式屬性

要使元素沒有任何輪廓，我們使用 **none** 值。在以下示例中，**none** 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         background-color: #08ff90;
         outline-width: 7px;
         outline-style: none;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: none
   </h4>
   <div class="example ex1">
      This div has outline-style: none 
   </div>
</body>

</html>

使用 Hidden 值的輪廓樣式屬性

要使元素具有隱藏的輪廓，我們使用 **hidden** 值。在以下示例中，hidden 值與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         background-color: #08ff90;
         outline-width: 7px;
         outline-style: hidden;

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: hidden
   </h4>
   <div class="example ex1">
      This div has outline-style: hidden 
   </div>
</body>

</html>

使用 Dotted 值的輪廓樣式屬性

要使元素具有點狀輪廓，我們使用 **dotted** 值。在以下示例中，dotted 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: dotted
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: dotted 
   </div>
</body>

</html>

使用 Dashed 值的輪廓樣式屬性

要使元素具有虛線輪廓，我們使用 **dashed** 值。在以下示例中，dashed 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: dashed
   </h4>
   <div class="example ex1">
      This div has border: 4px solid 
      black and outline-style: dashed 
   </div>
</body>

</html>

使用 Solid 值的輪廓樣式屬性

要使元素具有實線輪廓，我們使用 **solid** 值。在以下示例中，solid 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
   CSS outline-style property
   </h2>
   <h4>
   outline-style: solid
   </h4>
   <div class="example ex1">
   This div has border: 4px dashed 
   black and outline-style: solid 
   </div>
</body>

</html>

使用 Double 值的輪廓樣式屬性

要使元素具有雙線輪廓，我們使用 **double** 值。在以下示例中，double 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
   CSS outline-style property
   </h2>
   <h4>
   outline-style: double
   </h4>
   <div class="example ex1">
   This div has border: 4px dashed 
   black and outline-style: double 
   </div>
</body>

</html>

使用 Groove 值的輪廓樣式屬性

要使元素具有凹槽輪廓，我們使用 **groove** 值。在以下示例中，groove 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: groove
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: groove 
   </div>
</body>

</html>

使用 Ridge 值的輪廓樣式屬性

要使元素具有凸起輪廓，我們使用 **ridge** 值。在以下示例中，ridge 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: ridge
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: ridge 
   </div>
</body>

</html>

使用 Inset 值的輪廓樣式屬性

要使元素具有內嵌輪廓，我們使用 **inset** 值。在以下示例中，inset 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: inset
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: inset 
   </div>
</body>

</html>

使用 Outset 值的輪廓樣式屬性

要使元素具有外凸輪廓，我們使用 **outset** 值。在以下示例中，outset 值已與 **outline-style** 屬性一起使用。

示例

<!DOCTYPE html>
<html>

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

      }
   </style>
</head>

<body>
   <h2>
      CSS outline-style property
   </h2>
   <h4>
      outline-style: outset
   </h4>
   <div class="example ex1">
      This div has border: 4px dashed 
      black and outline-style: outset 
   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
outline-style 1.0 8.0 1.5 1.2 7.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告