邊框屬性:
border-style? border-width? border-color
border-style:
none(沒有邊框)? solid(實線邊框)? dashed(虛線邊框)? dotted(點狀邊框)? double(雙線邊框)? groove(凸槽邊框)? ridge(壟狀邊框)? inset(inset邊框)? outset (outset邊框)? inherit(繼承)
1.統一定義 —— ?border-style:具體值;
例如:
.div0{
? ? ?border-style:none;
}
2.分別定義 —— border-方向-style:具體值;
例如:
.div1{
? ? border-top-style:solid;
? ? border-left-style:dashed;
? ? border-bottom-style:dotted;
? ? border-right-style:double;
}
border-width:
thin(細邊框) medium(中等邊框) thick(粗邊框) px(自定義值)? inherit(繼承)
1.統一定義 —— border-width:具體值;
例如:
.div2{
border-width:10px;
}
2.分別定義 —— border-方向-width:具體屬性;
例如:
.div3{
border-style:solid;
border-top-width:thin;
border-left-width:medium;
border-bottom-width:thick;
border-right-width:10px;
}
border-color:
顏色值的名稱 ? ?RGB ? ?RGBA ? ?16位進制 ?inherit(繼承)
1.統一定義 —— border-color:具體值;
例如:
.div4{
border-style:solid;
bord-width:10px;
border-color:red;
}
2.分別定義 —— border-方向-color:具體值;
例如:
.div5{
border-style:solid;
border-width5;
border-top-color:orange;
border-left-color:blue;
border-bottom-color:yellow;
border-right-color:red;
}
3.簡單定義 —— ?border-color:具體值
一個值(上、下、左、右)/兩個值(上下、左右)/三個值(上、(左右)、下)/四個值(上、右、下、左)
例如:
.div6{
border-style:solid;
border-width10px;
border-color:red green;
}
.div7{
border-style:solid;
border-width10px;
border-color:red green orange;
}
.div8{
border-style:solid;
border-width10px;
border-color:red green orange blue;
}
總結:
邊框屬性有一種簡寫方式 —— border:style ?width color;
例如:
.div9{
border:double 10px blue;
}
待續。。。