华南俳烁实业有限公司

您可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如 2px 或 0.1em；或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thin 、medium（默認(rèn)值） 和 thick。

注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶代理則分別設(shè)置為 3px、2px 和 1px。

所以，我們可以這樣設(shè)置邊框的寬度：

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

或者：

p {border-style: solid; border-width: thick;}

定義單邊寬度

您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：

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

上面的例子也可以簡(jiǎn)寫為（這樣寫法稱為值復(fù)制）：

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

您也可以通過下列屬性分別設(shè)置邊框各邊的寬度：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

因此，下面的規(guī)則與上面的例子是等價(jià)的：

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

沒有邊框

在前面的例子中，您已經(jīng)看到，如果希望顯示某種邊框，就必須設(shè)置邊框樣式，比如 solid 或 outset。

那么如果把 border-style 設(shè)置為 none 會(huì)出現(xiàn)什么情況：

p {border-style: none; border-width: 50px;}

盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會(huì)變成 0。邊框消失了，為什么呢？

這是因?yàn)槿绻�邊框樣式�?none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 0，而不論您原先定義的是什么。

記住這一點(diǎn)非常重要。事實(shí)上，忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。根據(jù)以下規(guī)則，所有 h1 元素都不會(huì)有任何邊框，更不用說 20 像素寬了：

h1 {border-width: 20px;}

由于 border-style 的默認(rèn)值是 none，如果沒有聲明樣式，就相當(dāng)于 border-style: none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。