outline

屬性樣式	設定值
outline 外框樣式	outline-color 之值 outline-style 之值 outline-width 之值
預設值：依個別特性而定 適用於：全部 繼承性：無

這個樣式是用來設定元素的外框樣式。此樣式跟邊框樣式(border)非常的類似，事實上這兩者之間還是有關鍵性的差異，否則也不會跑出這個外框樣式。

底下的圖正好可以用來簡單說明一下 outline 與 border 的差異處。銀色的框線為外框，紅色的框線為邊框。

div.MyStyle {
	border: 5px double red;
	outline: 5px solid #cococo;
	}

outline-color

屬性樣式	設定值
outline-color 外框顏色	RGB 設定方式 (#000000 ~ #ffffff) 顏色名稱 (red,blue,black…) invert
預設值：invert 適用於：全部 繼承性：無

這個樣式是用來設定元素外框的顏色。

button.MyStyle {
	outline-width: 1px;
	outline-color: blue;
	}

outline-style

屬性樣式	設定值
outline-style 外框種類	none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
預設值：none 適用於：全部 繼承性：無

這個樣式是用來設定元素外框的種類。

button.MyStyle {
	outline-width: 1px;
	outline-style: dashed;
	}

outline-width

屬性樣式	設定值
outline-width 外框厚度	絕對單位：in、cm、mm、pt、pc 相對單位：em、ex、px thin medium thick
預設值：medium 適用於：全部 繼承性：無

這個樣式是用來設定元素外框的厚度。

button.MyStyle {
	outline-color: blue;
	outline-width: 30px;
	}

文章分類