設定元素 輪廓線的風格。由於 outline-style 的預設值為 none，沒有輪廓線；所以一定要將此特徵設為其它值，才能畫出輪廓線。 IE6 沒有支援 outline。
可以一次設定輪廓線的寬度，型態，顏色。個別設定值請參考後面說明。此特徵可設為：
- outline-color, outline-style, outline-width 的組合。
- inherit：繼承父元素的特徵值。
- 風格用法：
<span style='outline:solid blue 8px;
border:solid white 4px'>
子曰：學而時習之，不亦說乎？
</span> - 執行結果： 子曰：學而時習之，不亦說乎？
- 上例中，border 是白色，outline 是藍色。
設定輪廓線的顏色。
- 顏色。
- invert：色值取反值，0 變 1，1 變 0。此為預設值。
- inherit：繼承父元素的特徵值。
- 風格用法：
<span style='outline:8px solid blue'>
子曰：學而時習之，不亦說乎？</span><br /><br /><br />
<span style='outline:8px solid invert'>
子曰：學而時習之，不亦說乎？</span><br /> - 執行結果：
子曰：學而時習之，不亦說乎？
子曰：學而時習之，不亦說乎？
- 上例第二句，IE8, Safari, Chrome 顯示白色輪廓線；Firefox 沒有支援 invert。
設定輪廓線與 邊線（border）的距離。
- 長度：輪廓線與元素邊線的距離。
- inherit：繼承父元素的特徵值。
- 風格用法：
<span style='outline:8px solid blue;
outline-offset:0px;
border:solid white 4px'>
子曰：學而時習之，不亦說乎？</span><br /><br /><br />
<span style='outline:8px solid blue;
outline-offset:8px;
border:solid white 4px'>
子曰：學而時習之，不亦說乎？</span><br /> - 執行結果：
子曰：學而時習之，不亦說乎？
子曰：學而時習之，不亦說乎？
- 上例 IE6, IE8 沒有支援；Firefox, Safari, Chrome 都成功。
設定輪廓線的型態。由於 outline-style 的預設值為 none，沒有輪廓線；所以一定要將此特徵設為其它值，才能畫出輪廓線。
可設的特徵值有：
- none：無輪廓線，outline-width 會變成 0，此為預設值。
- hidden：與 none 相同，除了在 TABLE 元素上不同。
- dotted：點線。
- dashed：分段線。
- solid：單實心線。
- double：內外雙輪廓線。
- groove：內刻。
- ridge：凸出。
- inset：內縮。
- outset：外凸。畫 groove, ridge, inset, outset 會用到元素的顏色。
- inherit：繼承父元素的特徵值。
- 風格用法：
dotted: <span style='outline:8px dotted red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
dashed: <span style='outline:8px dashed red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
solid: <span style='outline:8px solid red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
double: <span style='outline:8px double red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
groove: <span style='outline:8px groove red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
ridge: <span style='outline:8px ridge red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
inset: <span style='outline:8px inset red'>子曰：學而時習之，不亦說乎？</span><br /><br /><br />
outset: <span style='outline:8px outset red'>子曰：學而時習之，不亦說乎？</span> - 執行結果：dotted: 子曰：學而時習之，不亦說乎？
dashed: 子曰：學而時習之，不亦說乎？
solid: 子曰：學而時習之，不亦說乎？
double: 子曰：學而時習之，不亦說乎？
groove: 子曰：學而時習之，不亦說乎？
ridge: 子曰：學而時習之，不亦說乎？
inset: 子曰：學而時習之，不亦說乎？
outset: 子曰：學而時習之，不亦說乎？
設定輪廓線的寬度。可設為：
- 長度：輪廓線的寬度。不可為負值。
- thin：細的輪廓線。
- medium：適中的輪廓線，此為預設值。
- thick：粗的輪廓線。
- inherit：繼承父元素的特徵值。
- 風格用法：
<span style='outline:8px solid blue'>
子曰：學而時習之，不亦說乎？</span><br /><br /><br />
<span style='outline:thin solid blue'>
子曰：學而時習之，不亦說乎？</span><br /><br />
<span style='outline:medium solid blue'>
子曰：學而時習之，不亦說乎？</span><br /><br /><br />
<span style='outline:thick solid blue'>
子曰：學而時習之，不亦說乎？</span><br /><br /> - 執行結果：
子曰：學而時習之，不亦說乎？
子曰：學而時習之，不亦說乎？
子曰：學而時習之，不亦說乎？
子曰：學而時習之，不亦說乎？
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {width:200px;
height:150px;
outline:solid 8px red;
}
.hvr:hover {outline-style:groove;}
.hvr:active {outline-color:blue;}
</style>
<div class=hvr>
網路遊戲，線上遊戲，好玩遊戲，越野障礙遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
</div> - 執行結果：
網路遊戲，線上遊戲，好玩遊戲，越野障礙遊戲，射擊遊戲，益智遊戲，武打遊戲，槍戰遊戲。
javascript 應用。可以用 style 物件 的特徵 outline, outlineColor, outlineStyle, outlineWidth 讀取或設定特徵值。
- 風格用法：
<span style='outline:groove 8px blue' id='otl'>
測試
</span><br /><br />
<script type='text/javascript'>
var os=document.getElementById('otl').style;
document.write( os.outline
+'<br />'+ os.outlineColor
+'<br />'+ os.outlineStyle
+'<br />'+ os.outlineWidth );
</script> - 執行結果：
測試
blue groove 8px
blue
groove
8px
- 不同瀏覽器的輸出格式有差異。
