邊框《CSS權威指南》讀書筆記

標籤：

元素的外邊距內就是元素的邊框。即圍繞元素內容和內邊距的一條或多條線。由於元素的背景不會在元素外邊距以內，所以背景在元素外邊框邊界處停止。

邊框有三個方面：寬度或粗細，樣式或外觀，顏色。

寬度預設值為medium，通常為2px，預設none，所以不一定能看到邊框。

顏色預設是元素的前景色彩，如果沒有前景色彩則是元素文本顏色，如果也沒有，那麼將繼承父元素的文本顏色。

邊框和背景

大多數瀏覽器遵循CSS2.1的定義，元素的背景是內容、內邊距和邊框處的背景。

有樣式的邊框

樣式控制著邊框的顯示，沒有樣式，就沒有邊框。

border-style定義了10個不同的非inherit樣式，包括預設值none。

double定義為兩條線的寬度再加上這兩條線之間的空間等於border-width值。兩條線的粗細以及線之間的空間的寬度由使用者代理程式決定。

多種樣式

可以為給定邊框定義多個樣式，例如：

 p.aside{border-style:solid dashed dotted solid;} 

結果是段落由一個實線上邊框、虛線右邊框、點線下邊框和一個實線左邊框。

單邊樣式

border-top/right/bottom/left-style

如果三邊有邊框，一邊無邊框，有兩種寫法，第一種在樣式裡一一聲明，這裡不多說，說說第二種，

 h1{border-style:solid;border-left-style:none;}

注意：必須把單邊屬性放在簡寫屬性之後，如果放在簡寫屬性之前則會覆蓋單邊屬性的值。

邊框寬度

為邊框指定寬度有4種方法：長度值、thin、medium、thick

邊框的預設寬度為medium

根本沒有邊框

在設定邊框的寬度之前一定要聲明border-style（預設值是none），否則是沒有邊框的，也就是邊框的寬度設定無效。

邊框顏色

border-color一次可以設定四個值，也可值複製。

透明邊框

主要是將邊框的顏色設定成透明的，值為transparent，這個值用於建立有寬度的不可見框線。

IE7之前版本不支援

簡寫邊框屬性

border-top/right/bottom/left：width style color;

順序不重要，打亂了還是一個效果。

也可省略一些值，未聲明的將會應用預設值。

 邊框和行內元素

其規則很大程度上與外邊距和行內元素的相應規則相同。

上下邊，邊框不影響行內元素的行高，邊框可能會覆蓋其它元素。

左右邊，文本會在邊框旁邊顯示，不會覆蓋左右兩邊的元素。

換行時和行內元素和外邊距的規則一樣，可能會將航中某些部分向後移一點點，而這有可能改變位於行尾的詞。

邊框《CSS權威指南》讀書筆記