邊框屬性
什麼是邊框
就是環繞在標籤周長的線條。
格式第一種連寫(同時設定四條邊的邊框)
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...