CSS常见属性（边框属性）

边框属性：

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;

}

待续。。。