边框属性:
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;
}
待续。。。