css 科技 邊框 CSS 邊框

2021-10-13 10:28:46 字數 736 閱讀 7009

邊框的寬度

為邊框指定寬度有兩種方法:可以指定長度值,比如 2px 或 0.1em;或者使用 3 個關鍵字之一,它們分別是 thin 、medium(預設值) 和 thick。

注釋:css 沒有定義 3 個關鍵字的具體寬度,所以乙個使用者**可能把 thin 、medium 和 thick 分別設定為等於 5px、3px 和 2px,而另乙個使用者**則分別設定為 3px、2px 和 1px。

所以,我們可以這樣設定邊框的寬度:

p 或者:

p 定義單邊寬度

您可以按照 top-right-bottom-left 的順序設定元素的各邊邊框:

p 上面的例子也可以簡寫為(這樣寫法稱為值複製):

p 您也可以通過下列屬性分別設定邊框各邊的寬度:

因此,下面的規則與上面的例子是等價的:

p 儘管邊框的寬度是 50px,但是邊框樣式設定為 none。在這種情況下,不僅邊框的樣式沒有了,其寬度也會變成 0。邊框消失了,為什麼呢?

這是因為如果邊框樣式為 none,即邊框根本不存在,那麼邊框就不可能有寬度,因此邊框寬度自動設定為 0,而不論您原先定義的是什麼。

記住這一點非常重要。事實上,忘記宣告邊框樣式是乙個常犯的錯誤。根據以下規則,所有 h1 元素都不會有任何邊框,更不用說 20 畫素寬了:

h1 由於 border-style 的預設值是 none,如果沒有宣告樣式,就相當於 border-style: none。因此,如果您希望邊框出現,就必須宣告乙個邊框樣式。

css 科技 邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值,比如 2px 或 0.1em 或者使用 3 個關鍵字之一,它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度,所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...