原文：http://jorux.com/archives/property-3-if-you-love-css/
本篇主要介紹css對邊框(border)的屬性控制和鏈接(link)的偽類選擇器.
邊框(border): css控制的邊框?qū)傩园╞order-width, border-color, border-style.
Border之所以讓人很困惑主要源于IE5錯綜復(fù)雜的BUG, 由于IE5是一個“will soon be dead” 的瀏覽器, 這里只例舉一個最為知名的關(guān)于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:

如上圖所示, 對象A(白色矩形)周圍有藍(lán)色邊框B, 可以看出A的實(shí)際寬度為ef, 而IE5不這么認(rèn)為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.
現(xiàn)在, 結(jié)合以上說明, 可以看出border是獨(dú)立于對象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區(qū)域.
1. border-width: 其可有具體數(shù)值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由于瀏覽器及個人設(shè)置的不同導(dǎo)致thin, medium, thick這些屬性值的表現(xiàn)不一, 不推薦使用. css代碼如下:
border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;
寬度效果如下(注意不同瀏覽器下的區(qū)別):
1px2pxthinmediumthick
2. border-style: 邊框樣式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代碼如下:
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
樣式效果如下(你可能需要Firefox或是Opera才能看到后四種效果):
solid

dashed

dotted

double

groove

ridge

inset

outset
3. border-color: 邊框顏色屬性和一般顏色屬性是一樣的, 可以參看屬性篇(1).
Summary: 以上例舉的都是四邊相同樣式的情況, 其實(shí)可以分別設(shè)置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現(xiàn)一個寬2px, 藍(lán)色(blue), 樣式為solid的上下邊框, 代碼如下:
border-top-width: 2px;
border-top-color: blue;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom-style: solid;
簡寫為:
border-top: blue 2px solid;
border-bottom: blue 2px solid;
表現(xiàn)如下:
寬2px,藍(lán)色,樣式為solid的邊框

最新評論