在 CSS 中，輪廓用於在元素外部繪製一條線。輪廓與邊框類似，但它們不佔用佈局中的空間，通常用於視覺強調或突出顯示元素。

以下是在 CSS 中使用輪廓的方法：

基本概要：

您可以使用outline屬性設定基本輪廓。它需要三個值：

 CSS
 .element {
  outline: [outline-color] [outline-style] [outline-width];
}

輪廓顏色：輪廓的顏色。可以使用顏色名稱、十六進位代碼、RGB 值等指定。
輪廓樣式：輪廓的樣式。 inset ridge solid dotted dashed double groove outset none
輪廓寬度：輪廓的寬度。可以用像素、ems、rems 等指定。

例子：

 CSS
 .element {
  outline: 2px solid red;
}

速記大綱：

您可以使用簡寫屬性outline一次設定所有三個值：

 CSS
 .element {
  outline: [outline-width] [outline-style] [outline-color];
}

例子：

 CSS
 .element {
  outline: 2px solid red;
}

輪廓偏移：

您可以使用outline-offset屬性來設定元素的輪廓和邊框之間的間距：

 CSS
 .element {
  outline-offset: 5px;
}

刪除輪廓：

若要從元素中刪除輪廓，可以將outline屬性設為none ：

 CSS
 .element {
  outline: none;
}

請記住，刪除輪廓，尤其是從連結和按鈕等互動元素中刪除輪廓，可能會影響可訪問性。提供替代樣式或視覺指示器來聚焦是很重要的。

例子：

 html
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outlined {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 20px;
      outline: 2px dashed red;
    }

    .no-outline {
      width: 100px;
      height: 50px;
      background-color: lightgreen;
      margin: 20px;
      outline: none;
    }
  </style>
  <title>Outline Example</title>
</head>
<body>
  <div class="outlined">Outlined Element</div>
  <div class="no-outline">Element with No Outline</div>
</body>
</html>

在此範例中，第一個div有輪廓，第二個沒有輪廓。根據您的需求調整值。