最新的Web開發教程
 

CSS邊界

❮上一頁 下一章❯

CSS邊框屬性

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

該元素具有一個槽的邊界是15像素寬和綠色。

邊框樣式

在border-style屬性指定什麼樣的邊框顯示。

下面的值是允許的：

  • dotted -定義虛線邊框
  • dashed -定義虛線邊框
  • solid -定義了堅實的邊界
  • double -定義了一個雙邊框
  • groove -定義3D凹槽的邊框。 效果依賴於邊框顏色值
  • ridge -定義了一個三維脊邊框。 效果依賴於邊框顏色值
  • inset -定義3D插圖邊框。 效果依賴於邊框顏色值
  • outset - 3D突出邊框。 效果依賴於邊框顏色值
  • none -不定義任何邊界
  • hidden -定義了一個隱藏的邊界

在border-style屬性可以有一到四個值（在頂部邊框，右邊框，下邊框和左邊框）。

例

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

結果：

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

試一試»
注意注意：除非下面介紹的其他CSS邊框屬性都不會產生任何影響border-style屬性設置！

邊框寬度

在border-width屬性指定的四個邊框的寬度。

的寬度可以設置為一個特定大小（以px, pt, cm, em等）或通過使用三個預定義值之一：薄，中等或厚。

在border-width屬性可以有一到四個值（在頂部邊框，右邊框，下邊框和左邊框）。

例

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
試一試»

邊框顏色

所述border-color屬性被用於設置四個邊框的顏色。

顏色可以通過設置為：

  • name -指定顏色的名稱，如"red"
  • Hex -指定一個十六進制值，如"#ff0000"
  • RGB -指定RGB值，如"rgb(255,0,0)"
  • transparent

所述border-color屬性可以具有從一到四個值（上邊界，右邊界，下邊框，和左邊框）。

如果border-color沒有設置，它繼承了元素的顏色。

例

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
試一試»

邊界 - 各個邊

從你上面的例子已經看到，有可能指定不同的邊界為每個邊。

在CSS中，也有用於指定每個邊界（上，右，下，左）的屬性：

例

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
試一試»

上面的例子給出了相同的結果，因為這：

例

p {
    border-style: dotted solid;
}
試一試»

所以，這裡是它如何工作的：

如果border-style屬性有四個值：

  • border-style ：虛線實線虛線兩倍;
    • 頂部邊框點綴
    • 右邊框是實
    • 下邊框是雙
    • 左邊框為虛線

如果border-style屬性有三個值：

  • border-style ：虛線實雙;
    • 頂部邊框點綴
    • 左右邊框是實
    • 下邊框是雙

如果border-style屬性有兩個值：

  • border-style ：虛線實線;
    • 頂部和底部邊框點綴
    • 左右邊框是實

如果border-style屬性有一個值：

  • border-style ：星羅棋布;
    • 所有四個邊框點綴

的border-style屬性在上面的例子中使用。 然而，它也可以與border-width和border-color 。

邊框 - 速記屬性

正如你可以從上面的例子看到，有許多屬性與邊框處理時要考慮的。

為了縮短代碼，但也可以在一個屬性來指定所有的單個邊界特性。

該border屬性是以下各個邊框屬性的速記屬性：

  • border-width
  • border-style （必填）
  • border-color

例

p {
    border: 5px solid red;
}
試一試»
例子

更多示例

所有在一個聲明頂部邊框屬性
這個例子演示了在一個聲明中設置的所有屬性的上邊框的簡寫屬性。

設置在底邊框的樣式
這個例子演示了如何設置在底邊框的樣式。

設置左邊框的寬度
這個例子演示了如何設置左邊框的寬度。

設置四個邊框的顏色
這個例子演示了如何設置四個邊框的顏色。 它可以有一至四個顏色。

設置右邊框的顏色
這個例子演示了如何設置右邊框的顏色。

自測練習用！

練習1» 練習2» 練習3» 練習4»

所有的CSS邊框屬性

屬性 描述
border 設置在一個聲明中所有的邊框屬性
border-bottom 設置在一個聲明中所有的底部邊框屬性
border-bottom-color 設置底邊框的顏色
border-bottom-style 設置底邊框的樣式
border-bottom-width 設置底邊框的寬度
border-color 設置四個邊框的顏色
border-left 設置在一個聲明中所有的左邊框屬性
border-left-color 設置左邊框的顏色
border-left-style 設置左邊框的樣式
border-left-width 設置左邊框的寬度
border-right 設置在一個聲明中所有的右邊框屬性
border-right-color 設置右邊框的顏色
border-right-style 設置右邊框的樣式
border-right-width 設置右邊框的寬度
border-style 設置四個邊框的樣式
border-top 設置在一個聲明中所有的頂級邊框屬性
border-top-color 設置上邊框的顏色
border-top-style 設置上邊框的風格
border-top-width 設置上邊框的寬度
border-width 設置四個邊框的寬度

❮上一頁 下一章❯