輪廓 outline

輪廓是一種會出現在元素「邊框外緣」的一種「裝飾線條」，具有不佔空間又不受限矩形的特性，這篇教學會介紹控制輪廓樣式的 outline、outline-style、outline-width 和 outline-color 用法，最後還會介紹什麼是「不規則形狀」的輪廓。

快速導覽：

• outline 撰寫語法
• outline-style 輪廓樣式
• outline-width 輪廓粗細
• outline-color 輪廓顏色
• 不規則形狀的 outline

outline 撰寫語法

輪廓是元素的一種「裝飾」，會出現在「邊框外緣」，跟元素邊框有點類似，但也有下列幾種差別：

如果要控制輪廓樣式，最簡單的方法可以使用「縮寫形式」的 outline，一次設定「輪廓粗細、輪廓樣式、輪廓顏色」，撰寫語法如下：

div {
  border: 輪廓粗細 輪廓樣式 輪廓顏色;
}

雖然縮寫形式很方便，但仍有一些相關規則：

• 屬性值使用「空白」分隔。
• 屬性值「沒有先後順序規則」。
• 縮寫形式如果沒有輪廓樣式，會自動套用 none，不會呈現輪廓。

下方的範例會讓三個 div 呈現不同輪廓，並用 span 作為實際內容區域，從中可以注意輪廓包覆著邊框，如果有設定邊框圓角，輪廓也會變成圓角。

線上展示：https://codepen.io/oxxo/pen/YzoKyRO

<!-- HTML 程式碼 -->
<div class="a"><span>apple</span></div>
<div class="b"><span>banana</span></div>
<div class="c"><span>oxxo</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 50px;
    margin: 20px;
    padding: 10px;
    border: 5px solid red;
  }
  span {
    display: block;
    width: 100%;
    height: 100%;
    background: orange;
  }
  .a {outline: 2px solid #000;}
  .b {outline: 5px solid #000;}
  .c {
    border-radius: 30px;     /* 邊框圓角 */
    outline: 5px solid #000;
  }
</style>

由於 outline 只是裝飾性質，不佔任何空間，因此如果輪廓寬度較大，就會發生遮蔽其他元素的狀況，下方範例呈現同樣寬度的 border 與 outline 在空間上的差異。

線上展示：https://codepen.io/oxxo/pen/mdZbeQa

<!-- HTML 程式碼 -->
<div class="a">border: 30px solid #f005;</div>
<span>hello oxxo!!</span>
<br>
<span>good morning</span>
<div class="b">outline: 30px solid #0f0;</div>
<span>hello oxxo!!</span>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    height: 50px;
    margin-left: 30px;
  }
  span {font-size: 20px;}
  .a {border: 15px solid #f00;}
  .b {outline: 15px solid #0f0;}
</style>

outline-style 輪廓樣式

設定輪廓時，需要使用特定的「樣式名稱」，就能產生對應的「輪廓樣式」，下方列出 CSS 支援的輪廓樣式名稱 ( 幾乎和邊框相同 )：

下方範例會使用多個 div，分別表現不同的輪廓樣式。

線上展示：https://codepen.io/oxxo/pen/bGPbVOb

<!-- HTML 程式碼 -->
<div class="a">solid</div>
<div class="b">double</div>
<div class="c">dotted</div>
<div class="d">dashed</div>
<div class="e">groove</div>
<div class="f">ridge</div>
<div class="g">inset</div>
<div class="h">outset</div>
<div class="i">auto</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 120px;
    padding: 20px 10px;
    margin: 15px;
    outline: 10px solid red;
    float: left;
  }
  .a {outline-style: solid;}
  .b {outline-style: double;}
  .c {outline-style: dotted;}
  .d {outline-style: dashed;}
  .e {outline-style: groove;}
  .f {outline-style: ridge;}
  .g {outline-style: inset;}
  .h {outline-style: outset;}
  .i {outline-style: auto;}
</style>

outline-width 輪廓粗細

設定輪廓的粗細時，需要使用「具有長度單位」的數值，和邊框粗細的差異是，邊框粗細可以單獨設定上下左右的粗細，而輪廓只能一次性設定全部輪廓的粗細，下方列出 CSS 支援的輪廓粗細長度單位：

延伸閱讀：長度與角度單位

下方範例使會使用五個 div，分別呈現不同輪廓粗細的設定方式。

線上展示：https://codepen.io/oxxo/pen/poXzjqy

<!-- HTML 程式碼 -->
<div class="a">outline-width: 10px;</div>
<div class="b">outline-width: 0.5em;</div>
<div class="c">outline-width: 1rem;</div>
<div class="d">outline-width: thin;</div>
<div class="e">outline-width: thick;</div>

<!-- CSS 程式碼 -->
<style>
  :root {
    font-size: 20px;
  }
  div {
    width: 200px;
    margin: 30px;
    padding: 10px;
    outline:10px solid #000;
    font-size: 14px;
  }
  .a {outline-width: 10px;}
  .b {outline-width: 0.5em;} /* 14px x 0.5 = 7px */
  .c {outline-width: 1rem;}  /* 20px x 1 = 20px */
  .d {outline-width: thin;}
  .e {outline-width: thick;}
</style>

outline-color 輪廓顏色

設定輪廓的顏色時，需要使用「具有顏色單位」的數值，只支援「單色」，每種顏色單位都可以添加不同程度的透明度，下方列出 CSS 支援的輪廓顏色單位。

延伸閱讀：顏色單位、CSS 函式 ( 色彩模型 )

下方範例使會使用五個 div，分別呈現不同邊框顏色的設定方式，顏色單位可以混合使用，只要最後可以正確計算出顏色數值就可以。

線上展示：https://codepen.io/oxxo/pen/eYwOpbg

<!-- HTML 程式碼 -->
<div class="a">outline-color: orange;</div>
<div class="b">outline-color: #a0a;</div>
<div class="c">outline-color: #ff000077;</div>
<div class="d">outline-color: rgb(0,200,100);</div>
<div class="e">outline-color: hsl(50, 50%, 30%, 0.5);</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 260px;
    margin: 30px;
    padding: 10px;
    outline:10px solid #000;
    font-size: 14px;
  }
  .a {outline-color: orange;}
  .b {outline-color: #a0a;}
  .c {outline-color: #ff000077;}
  .d {outline-color: rgb(0,200,100);}
  .e {outline-color: hsl(50, 50%, 30%, 0.5);}
</style>

不規則形狀的 outline

outline 最大的特色就是「不受限矩形」範圍，這種現象在 inline 或 inline-* 等行內容器特別明顯，雖然網頁元素容器都是矩形，但行內元素的換行或不同高度間的組合，對於 outline 而言卻會合併成一個「不規則形狀」，因此就會替這個不規則形狀加上輪廓。

下方的範例展示設定了 outline 的 div、span 裡的 strong 以及整個 span，可以看見行內容器組合後的不規則輪廓，以及 div 仍保留矩形輪廓的效果。

線上展示：https://codepen.io/oxxo/pen/abgovPL

<!-- HTML 程式碼 -->
<div><span>STEAM 教育學習網<strong>透過一系列免費且高品質的教學與範例</strong>，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span></div>
<span>STEAM 教育學習網<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">透過一系列免費且高品質的教學與範例</span>
  
<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 30px;
    padding: 10px;
    outline: 3px dotted #000;
  }
  strong {outline: 3px solid red;}
  span {outline: 3px dashed blue;}
  img {width:100px;}
</style>

但如果行內容器每一行的「行高太高」，造成上下行的間距超過了容器本身容器空間 ( 參考「文字行高、文字縮排」 )，這時就會變成兩個獨立的容器空間，輪廓也就會分開。

線上展示：https://codepen.io/oxxo/pen/GRbKpPz

<!-- HTML 程式碼 -->
<div><span>STEAM 教育學習網<strong>透過一系列免費且高品質的教學與範例</strong>，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span></div>
<div class='a'><span>STEAM 教育學習網<strong>透過一系列免費且高品質的教學與範例</strong>，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 20px;
    padding: 10px;
    outline: 3px solid #000;
  }
  .a {line-height: 50px;}
  strong {outline: 5px solid red;}
  span {outline: 2px dashed blue;}
</style>

小結

元素輪廓 outline 是一個滿有意思的樣式屬性，雖然沒有 border 的豐富多變，但其「不影響容器邊界」的特性，更適合用來操作一些不希望影響排版的樣式，相信對於網頁設計一定很有幫助。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～