轮廓 ( outline )

轮廓是一种会出现在元素“边框外缘”的一种“装饰线条”，具有不占空间又不受限矩形的特性，这篇教学会介绍控制轮廓样式的 outline、outline-style、outline-width 和 outline-color 用法，最后还会介绍什么是“不规则形状”的轮廓。

快速导览：

• outline 轮廓 ( 缩写格式 )
• outline-style 轮廓样式
• outline-width 轮廓粗细
• outline-color 轮廓颜色
• outline-offset 轮廓位置
• 不规则形状的 outline

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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 轮廓样式

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 轮廓粗细

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 轮廓颜色

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-offset 轮廓位置

outline-offset 可以“设定轮廓位置”，使用“具有长度单位”的数值且，轮廓位置表示“轮廓和边框”的间距，正值往外负值往内，下方范例会呈现不同数值所影响的轮廓位置，可以看出如果设定为为 0 ( 默认值 )，轮廓会紧接边框外缘，根据正值或负值往外或往内移动。

线上展示：https://codepen.io/oxxo/pen/azoazOP

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


<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 50px;
    margin: 20px;
    padding: 10px;
    border: 10px solid red;
    outline: 2px dashed #000;
  }
  .a {outline-offset: 0;}
  .b {outline-offset: 10px;}
  .c {outline-offset: -10px;}
  .d {outline-offset: -30px;}
</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 的丰富多变，但其“不影响容器边界”的特性，更适合用来操作一些不希望影响排版的样式，相信对于网页设计一定很有帮助。

意见反馈