CSS教學-CSS 語法教學10-邊框

在 CSS 中常見的邊框 (border) 屬性有以下幾種： border-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border border-style border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。 CSS 樣式 顯現結果 p {border-style:solid;} 實線 p {border-style:dashed;} 虛線 p {border-style:double;} 雙線 p {border-style:dotted;} 點線 p {border-style:groove;} 凹線 p {border-style:ridge;} 凸線 p {border-style:inset;} 嵌入線 p {border-style:outset;} 浮出線 border-width border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。 CSS 樣式 顯現結果 p {border-width:9px; border-style:solid;} 邊框寬度為 9px p {border-width:medium; border-style:dashed;} 邊框寬度為中等 border-color border-color 屬性是用來設定邊寬的顏色。 舉例如下： CSS 樣式 顯現結果 p {border-color:#0000FF; border-style:solid;} 藍色邊框 p {border-color:red; border-style:dotted;} 紅色邊框 border-top-, border-left-, border-bottom-, border-right- 我們可以將方向 (top - 上、bottom - 下、left - 左、right - 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說， border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子： CSS 樣式 顯現結果 p {border-top-style:solid; border-bottom-style:dotted;} 例1：上邊框為實線，下邊框為點線 p {border-top-style:solid; border-top-width:medium;} 例 2：上邊框為實線，且寬度中等 p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;} 例3：左邊框為實線，下邊框為虛線，且顏色為綠色 border 若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。 舉例來說，若我們有以下的 CSS 碼， p {   border:#0000FF 5px solid; } 那以下的 HTML， <p>用一行來宣佈所有邊框的屬性</p> 會顯現出 用一行來宣佈所有邊框的屬性

本文章轉貼自：http://freeshare2u.com/