css對邊框的屬性控制和鏈接的偽類選擇器

2024-07-11 08:43:00

字體：大中小

來源：轉載

供稿：網友

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

如上圖所示, 對象A(白色矩形)周圍有藍色邊框B, 可以看出A的實際寬度為ef, 而IE5不這么認為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.
現在, 結合以上說明, 可以看出border是獨立于對象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區域.
1. border-width: 其可有具體數值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由于瀏覽器及個人設置的不同導致thin, medium, thick這些屬性值的表現不一, 不推薦使用. css代碼如下:
border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;
寬度效果如下(注意不同瀏覽器下的區別):
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: 以上例舉的都是四邊相同樣式的情況, 其實可以分別設置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現一個寬2px, 藍色(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;
表現如下:
寬2px,藍色,樣式為solid的邊框

上一篇：css對于字體和背景等屬性的控制

下一篇：cookie和dom操作調用樣式表實現網頁換膚