CSS outline 屬性範例

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

CSS outline 語法規則

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


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

有無設定 CSS outline 的差異比較
<div style="background-color:#D4D4F8;width:300px;height:150px;"></div>
<div style="background-color:#D4D4F8;width:300px;height:150px;outline:#FA8000 dashed 5px;"></div>
呈現結果




由上方範例的結果可以發現,我們設定兩個 <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 屬性》篇的專題介紹。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012