框模型之邊框屬性

2021-10-10 04:56:09 字數 2278 閱讀 6558

邊框屬性

什麼是邊框

就是環繞在標籤周長的線條。

格式第一種連寫(同時設定四條邊的邊框)

border : 邊框寬度(border-width) 邊框樣式 邊框的顏色(border-color);

快捷鍵bd+然後按下table生成如下:

border

: 1px solid #000;

注意點:

1.連寫格式中顏色屬性可以省略,省略之後預設就是黑色。

2.連寫格式中邊框樣式不能省略,省略後無法看到邊框。

3.連寫格式中寬度可以省略 ,仍然看得到邊框。

第二種連寫(分別設定四條邊的邊框)

border-top: 邊框寬度 邊框樣式 邊框的顏色;

border-bottom: 邊框寬度 邊框樣式 邊框的顏色;

border-right: 邊框寬度 邊框樣式 邊框的顏色;

border-left: 邊框寬度 邊框樣式 邊框的顏色;

border-top

: 20px groove #c4ffca;

border-right

: 20px ridge #9ba8ff;

border-left

: 20px groove pink;

border-bottom

: 20px ridge skyblue;

注意點和快捷鍵和上邊一樣。

效果:第三種連寫(按照三要素設定四條邊的邊框,順時針)

border-width: 上 右 下 左(四個位置不同寬度)

border-style:上 右 下 左(四個位置不同樣式)

border-color:上 右 下 左(四個位置不同顏色)

border-width

: 5px 10px 15px 20px;

border-style

: groove ridge ridge groove;

border-color

: #c4ffca #9ba8ff skyblue pink ;

注意點:

1.賦值順序一定要注意順時針方向。

2.這個三個屬性省略時的規律

省略左邊取值,則左邊取值和右邊一樣。

省略下左,則其左邊屬性和右邊屬性一樣,下邊屬性和上邊屬性一樣

省略右下左,其他三個邊的屬性和這個邊一樣。

簡而言之,對邊屬性存在,省略一邊,則和對邊屬性一樣,只剩下一邊,所有邊屬性和它一樣。

第四種方式不縮寫
border-top-width

: 20px;

border-top-style

: groove;

border-top-color

: #ff0000;

分別設定每個邊的每個屬性。

邊框樣式取值(border-style)值描述

none

定義無邊框。

hidden

與 「none」 相同。不過應用於表時除外,對於表,hidden 用於解決邊框衝突。

dotted

定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed

定義虛線。在大多數瀏覽器中呈現為實線。

solid

定義實線。

double

定義雙線。雙線的寬度等於 border-width 的值。

groove

定義 3d 凹槽邊框。其效果取決於 border-color 的值。

ridge

定義 3d 壟狀邊框。其效果取決於 border-color 的值。

inset

定義 3d inset 邊框。其效果取決於 border-color 的值。

outset

定義 3d outset 邊框。其效果取決於 border-color 的值。

inherit

規定應該從父元素繼承邊框樣式。

a dotted border

a dashed border

a solid border

a double border

a groove border

a ridge border

an inset border

an outset border

效果圖:

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...

iframe div邊框屬性

用於設定文字或圖形的浮 文框或容器。border屬性 設定圍繞 框的邊緣寬度 frameboder屬性 設定邊框是不否為3維 0 否,1 是 height,width屬性 設質邊框的寬度和高度 scrolling屬性 是否有滾動條 yes,no,auto src屬性 指定iframe呼叫的檔案或 h...

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...