outline, outline-color, outline-offset, outline-style, outline-width

設定元素 輪廓線的風格。由於 outline-style 的預設值為 none，沒有輪廓線；所以一定要將此特徵設為其它值，才能畫出輪廓線。 IE6 沒有支援 outline。

outline | outline-color | outline-offset | outline-style | outline-width

outline

可以一次設定輪廓線的寬度，型態，顏色。個別設定值請參考後面說明。此特徵可設為：

1. outline-color, outline-style, outline-width 的組合。
2. inherit：繼承父元素的特徵值。

<span style='outline:solid blue 8px; border:solid white 4px'> 子曰：學而時習之，不亦說乎？ </span>

• 上例中，border 是白色，outline 是藍色。

outline-color

設定輪廓線的顏色。

1. 顏色。
2. invert：色值取反值，0 變 1，1 變 0。此為預設值。
3. inherit：繼承父元素的特徵值。

<span style='outline:8px solid blue'> 子曰：學而時習之，不亦說乎？</span><br /><br /><br /> <span style='outline:8px solid invert'> 子曰：學而時習之，不亦說乎？</span><br />

• 上例第二句，IE8, Safari, Chrome 顯示白色輪廓線；Firefox 沒有支援 invert。

outline-offset

設定輪廓線與 邊線（border）的距離。

1. 長度：輪廓線與元素邊線的距離。
2. 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

設定輪廓線的型態。由於 outline-style 的預設值為 none，沒有輪廓線；所以一定要將此特徵設為其它值，才能畫出輪廓線。

可設的特徵值有：

1. none：無輪廓線，outline-width 會變成 0，此為預設值。
2. hidden：與 none 相同，除了在 TABLE 元素上不同。
3. dotted：點線。
4. dashed：分段線。
5. solid：單實心線。
6. double：內外雙輪廓線。
7. groove：內刻。
8. ridge：凸出。
9. inset：內縮。
10. outset：外凸。畫 groove, ridge, inset, outset 會用到元素的顏色。
11. 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>

outline-width

設定輪廓線的寬度。可設為：

1. 長度：輪廓線的寬度。不可為負值。
2. thin：細的輪廓線。
3. medium：適中的輪廓線，此為預設值。
4. thick：粗的輪廓線。
5. 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>

• 不同瀏覽器的輸出格式有差異。