boder的內邊框 CSS Border 邊框

2021-10-16 14:12:52 字數 1498 閱讀 7059

css border(邊框)

元素的(border)邊框圍繞填充和內容。

css邊框屬性

css邊框屬性允許您定義框的邊框區域。邊框可以是預定義的樣式,例如實線,雙線,虛線等,也可以是影象。下一節將介紹如何設定各種屬性,以定義邊框的樣式(border-style),顏色(border-color)和厚度(border-width)。

(border-width)邊框寬度屬性

border-width屬性指定邊框區域的寬度。下面是一種速記屬性,用於同時設定元素邊框的所有四個邊的厚度。

示例p 測試看看‹/›

注意:如果border-width缺少或未指定屬性值,border-width則將使用的預設值(medium)。

(border-style)邊框樣式屬性

該border-style屬性設定框邊框的樣式,例如:solid,dotted等。它是用於設定元素邊框所有四個側面的線型的簡寫速記屬性。

該border-style屬性可採取以下值之一:none,hidden,dashed,dotted,double,groove,inset,outset,ridge和solid。

none: 沒有邊界。

hidden: 定義隱藏邊框。

dotted: 定義虛線邊框

dashed: 定義虛線邊框

solid: 定義實線邊框

double:定義兩個邊框。兩個邊框的寬度與border-width值相同

groove:定義3d溝槽邊框。效果取決於邊框顏色值

ridge:定義3d脊狀邊框。效果取決於邊框顏色值

inset:定義3d嵌入邊框。效果取決於邊框顏色值

outset:定義3d起始邊框。效果取決於邊框顏色值

示例p 測試看看‹/›

(border-color)邊框顏色屬性

該border-color屬性指定color框的邊框。這也是用於設定元素邊框所有四個側面的顏色的簡寫屬性。

示例p 測試看看‹/›

注意:border-color如果單獨使用該屬性,則該屬性將不起作用。使用border-style屬性首先設定邊框。

邊框簡寫速記屬性

該border css屬性是設定乙個或多個單獨的邊框屬性的速記屬性border-style,border-width和border-color在乙個單一的規則。

示例p 測試看看‹/›

如果在設定border速記屬性時忽略或未指定單個border屬性的值,則將使用該屬性的預設值(如果有)。

注意:border-color在設定元素的邊框時,如果缺少屬性值或未指定屬性值(例如border: 5px solid;),則該元素的color屬性將用作的值border-color。

在此示例中,邊框將是寬度為5px的黑色實線:

示例p 測試看看‹/›

但是,在有border-style屬性的情況下,省略該值將不會顯示任何邊框,因為這個時候border-style屬性 的預設值為none。

在下面的示例中,將沒有邊框:

示例p 測試看看‹/›

boder的內邊框 CSS 邊框

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

CSS 外邊框與內邊框屬性

1.1 上邊距 margin top 上邊距也叫頂端邊距,使用上邊距可以設定元素的上邊界,可以使用長度值或百分比。語法 margin top 邊距值 說明 margin top取值範圍包括如下 長度值相當於設定頂端的絕對邊框值,包括數字和單位 百分比是設定相對於上級元素的寬度的百分比,允許使用負值 ...

css 盒模型的內邊框

內邊距 padding 內容區和邊框之間的距離是內邊距 一共有四個方向的內邊距 padding top padding right padding bottom padding left 內邊距的設定會影響到盒子的大小 背景顏色會延伸到內邊距上 一共盒子的可見框的大小,由內容區 內邊距 和 邊框共同...