CSS 邊框各邊

CSS 邊框 - 單獨的邊

從上一章的例子中，您已經看到可以為每一側指定不同的邊框。

在 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: dotted solid double dashed;

  • 上邊框是虛線
  • 右邊框是實線
  • 下邊框是雙線
  • 左邊框是虛線

如果 border-style 屬性設置三個值：

border-style: dotted solid double;

  • 上邊框是虛線
  • 右和左邊框是實線
  • 下邊框是雙線

如果 border-style 屬性設置兩個值：

border-style: dotted solid;

  • 上和下邊框是虛線
  • 右和左邊框是實線

如果 border-style 屬性設置一個值：

border-style: dotted;

  • 四條邊均為虛線

實例

/* 四個值 */
p {
  border-style: dotted solid double dashed; 
}
/* 三個值 */
p {
  border-style: dotted solid double; 
}
/* 兩個值 */
p {
  border-style: dotted solid; 
}
/* 一個值 */
p {
  border-style: dotted; 
}

親自試一試

上例中使用的是 border-style 屬性。但 border-width 和 border-color 也同樣適用。