认识border

border就是边框的意思，边框有三个要素：粗细、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，就显示不出来边框。

边框所有的线性

border是一个大综合属性，

1 border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、红色。

 

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

 

一、按3要素拆开：

1. border-width:10px;    → 边框宽度

2. border-style:solid;     → 线型

3. border-color:red;      → 颜色。

等价于：

1. border:10px solid red;

现在心里要明白，原来一个border是由三个小属性综合而成：

border-width  border-style   border-color。

二、按方向拆分

border-top:10px solid red;

border-right:10px solid red;

border-bottom:10px solid red;

border-left:10px solid red; 

等价于border:10px solid red;

此外还可以按方向还能再拆一层，就是把每个方向的，每个要素拆开，

如：border-top-width:10px;

当然在工作中，哪种简单用哪种。