CSS 12. 邊框 (Border)

在 CSS 中常見的邊框 (border) 屬性有以下幾種:

  • border-style
  • border-width
  • border-color
  • border-top-, border-left-, border-bottom-, border-right-
  • border

    border-style

    border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值,以及每一個值顯現出來的結果。

    image

  • border-width

    border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚),或是一個數字。

    image

     

    border-top-, border-left-, border-bottom-, border-right-

    我們可以將方向 (top – 上、bottom – 下、left – 左、right – 右) 和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說, border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子:

    image

     

    border

    若四邊的邊框屬性都一樣,那我們可以用一個 border 屬性來描述,而不必四個邊都描述一次。另外,我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

    舉例來說,若我們有以下的 CSS 碼,

     

    image

    發表迴響

    你的電子郵件位址並不會被公開。 必要欄位標記為 *

    你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>