CSS outline 屬性範例

CSS outline 指的是元素的外圍邊框（輪廓），透過 outline 屬性的設定可以將元素所佔的範圍面積擴大，使用起來與 CSS border-style 有點類似，但效果有些為的差距，CSS outline 白話一點的說法可以說是輪廓線，待會兒用兩種寫法比較就知道差異了。

CSS outline 語法規則

outline:輪廓線顏色輪廓線樣式輪廓線粗細;

其中輪廓線顏色、輪廓線樣式與輪廓線粗細之間，都有一個空格隔開，且不見得全部都要寫出來。

有無設定 CSS outline 的差異比較

呈現結果

由上方範例的結果可以發現，我們設定兩個 <div> 區塊，他們的尺寸都一樣，但是下方的 <div> 區塊由於加上了 CSS outline 的屬性，也就是紅色的那段程式碼，所以就多出了一塊輪廓線，而輪廓線讓整個尺寸看起來比原本的更大一號（IE 瀏覽器可能看不出差異）。

瀏覽器對 CSS outline 的支援

我們剛剛測試了幾個主流的瀏覽器，包含了 Google Chrome、FireFox、Opera、Safari 與 IE 8，發現除了 IE 8 之外，其他的瀏覽器都可以直接支援 CSS outline 的屬性，IE 需要用其他的方式處理，不知道未來更新的版本可否直接支援。

CSS outline 屬性的搭配功能

CSS3 特別針對 outline 的屬性推出了搭配功能，稱為 outline-offset 屬性，此功能的用途是設定元素邊框與 outline 之間的距離，創造出不同的視覺效果，詳細用法請參閱《CSS3 outline-offset 屬性》篇的專題介紹。

延伸閱讀