設定元件 邊線的風格。由於 border-style 的預設值為 none,沒有邊線;所以一定要將此特徵設為其它值,才能畫出邊線。有關元素的邊界請參考 border, margin, padding, outline。
border
一次設定四周邊線的三個特徵:寬(border-width),顏色(border-color),型態(border-style)。設定時,會先將所有邊線相關特徵設為預設值,然後再依後接的值設定個別的特徵;沒有個別設定值的特徵,就使用預設值。可設的特徵值請參考各項的說明。
- 上例中,border 是紅色,outline 是白色。IE6 沒有 outline。
border-top
border-right
border-bottom
border-left
border-right
border-bottom
border-left
設定個別邊線的三個特徵:寬,顏色,型態。設定時,會先將所有邊線相關特徵設為預設值,然後再依後接的值設定個別的特徵;沒有個別設定值的特徵,就使用預設值。可設的特徵值請參考各項的說明。
- border-top 設定上邊線的三特徵。
- border-right 設定右邊線的三特徵。
- border-bottom 設定下邊線的三特徵。
- border-left 設定左邊線的三特徵。
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-color
border-right-color
border-bottom-color
border-left-color
設定邊線的顏色。
- border-color 可以一次設定四個邊線顏色,其順序是上 右 下 左;只有一個值時,則四邊相同;如果少於四個時,則上下相同與左右相同。
- border-top-color 設定上邊線的顏色。
- border-right-color 設定右邊線的顏色。
- border-bottom-color 設定下邊線的顏色。
- border-left-color 設定左邊線的顏色。
- <color>:顏色值。
- transparent:透明。有佔空間,但是沒有著色。
- inherit:繼承父元件的特徵值。
- 上例中 border 與 border-color 的次序不可反過來,因為 border 會先將所有特徵設為預設值。
測試 transparent。
- 上例顯示出 transparent 與沒設邊線顏色的差別。IE6 沒有支援 transparent;Firefox, Safari, Chrome 都成功。
- 上面出現一個很特殊的情形,在 IE6 中 DIV 與 P 元素的風格加上 width 或 height 的設定時,其邊線會使用父元素的背景色。使用時請多測試。
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-top-style
border-right-style
border-bottom-style
border-left-style
請參考 說明與範例。
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-width
border-right-width
border-bottom-width
border-left-width
設定邊線的寬度。
- border-width 可以一次設定四個邊線寬度。其順序是上 右 下 左。如果設定值少於四個時,其原則是,上下同寬與左右同寬。只有一個值時,則四邊同寬。
- border-top-width 設定上邊線的寬度。
- border-right-width 設定右邊線的寬度。
- border-bottom-width 設定下邊線的寬度。
- border-left-width 設定左邊線的寬度。
- <length>:長度值。 不可為負值。
- thin:細的邊線。
- medium:適中的邊線,此為預設值。
- thick:粗的邊線。
- inherit:繼承父元件的特徵值。
- 上例中 border 與 border-width 的次序不可反過來,因為 border 會先將所有特徵設為預設值。
:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
javascript 應用。可以用 style 物件 的特徵 border, borderColor, borderStyle, borderWidth(及加上 Top, Right, Bottom, Left 的組合名稱)讀取或設定特徵值。
- 不同瀏覽器的輸出格式有不同。