CSS 教學  >  邊框


在 CSS 中常見的邊框 (border) 屬性有以下幾種： border-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border border-style border-style 屬性指定邊框的樣..

在 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>

    會顯現出

    用一行來宣佈所有邊框的屬性

    下一頁： CSS 留白