DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS border屬性邊框用法揭秘(1)
CSS border屬性邊框用法揭秘(1)
編輯:CSS詳解     

在Html中,我們使用表格來創建文本周圍的邊框,但是通過使用CSS邊框屬性,我們可以創建出效果出色的邊框,並且可以應用於任何元素。

CSS border屬性邊框

元素的邊框(border)是圍繞元素內容和內邊距的一條或多條線,跟表格table的border類似。

CSS border屬性允許你規定元素邊框的樣式、寬度和顏色。

CSS邊框

在Html中,我們使用表格來創建文本周圍的邊框,但是通過使用CSS邊框屬性,我們可以創建出效果出色的邊框,並且可以應用於任何元素。

元素外邊距內就是元素的的邊框(border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。

每個邊框有3個方面:寬度、樣式,以及顏色。在下面的篇幅,我們會為您詳細講解這三個方面。

邊框與背景

CSS規范指出,邊框繪制在“元素的背景之上”。這很重要,因為有些邊框是“間斷的”(例如,點線邊框或虛線框),元素的背景應當出現在邊框的可見部分之間。

CSS2指出背景只延伸到內邊距,而不是邊框。後來CSS2.1進行了更正:元素的背景是內容、內邊距和邊框區的背景。大多數浏覽器都遵循CSS2.1定義,不過一些較老的浏覽器可能會有不同的表現。

邊框的樣式

樣式是邊框最重要的一個方面,這不是因為樣式控制著邊框的顯示(當然,樣式確實控制著邊框的顯示),而是因為如果沒有樣式,將根本沒有邊框。

CSS的border-style屬性定義了10個不同的非inherit樣式,包括none。

例如,您可以為把一幅圖片的邊框定義為outset,使之看上去像是“凸起按鈕”:

  1. a:linkimg{border-style:outset;}

定義多種樣式

您可以為一個邊框定義多個樣式,例如:

  1. p.aside{border-style:soliddotteddasheddouble;}

上面這條規則為類名為aside的段落定義了四種邊框樣式:實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。

我們又看到了這裡的值采用了top-right-bottom-left的順序,討論用多個值設置不同內邊距時也見過這個順序。

定義單邊樣式

如果您希望為元素框的某一個邊設置邊框樣式,而不是設置所有4個邊的邊框樣式,可以使用下面的單邊邊框樣式屬性:

  1. border-top-style
  2. border-right-style
  3. border-bottom-style
  4. border-left-style

因此這兩種方法是等價的:

  1. p{border-style:solidsolidsolidnone;}
  2. p{border-style:solid;border-left-style:none;}

注意:如果要使用第二種方法,必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在border-style之前,簡寫屬性的值就會覆蓋單邊值none。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved