border边框

接上文，边框的颜色书写规范为 

border-color:red green blue pink;

• 上边框是红色
• 右边框是绿色
• 下边框是蓝色
• 左边框是粉色
• 边框颜色设置的顺序跟上文边框风格和宽度的设置顺序一致，既可以设置整个边框，又可以单独设置一个边框的长宽

 

div {
            border-color: black blue;
            border-style: dotted;
            width: 200px;
            height: 200px;
        }

上文提到 给边框设置颜色时 设置四个会按照上右下左的顺序依次修改颜色，而当只设置两个颜色时候会按照上下，左右依次修改颜色，代码的运行结果如下

 当我们设置三个颜色时， 代码如下

border-color: black blue pink;

而运行的结果是只改变边框的下部分，结果如下

 其中值得我们注意的是 这种情况适用于border|width|style|color

还有一点我们需要注意 ，边框的宽度是在盒子的基础上添加的，比如当我们给盒子的宽度设置200px，给边框的宽度设置10px时，实际上该盒子的宽度为220px。

 但是我们要知道 前面的复合型写法只是为了让我们更加了解border的用法，实际的写法的中给边框这是单独的样式需要用border-top等格式更加的简谐明了。

下面我们单独举一个例子来说明一下

给下边框设置一个粉色的虚线边框边框的大小为10px代码如下 

 border-bottom: 10px pink dashed;

 而运行结果如下

 但是这个只有一个下边框，她的上左右边框却消失了，这需要我们依次用top等格式单独设置

注意运用此格式写时 需要书写上下左右的全部边框，一个格式没有声明则不会显示该没有声明的边框样式

但是我们发现这样写太过麻烦了，当我们想设置一个上边框像素为10px 粉色下左右边框像素为10px 颜色为蓝色的实线边框时 可以这样写 

div {
            border: 10px blue solid;
            border-top: 10px solid pink;
            width: 200px;
            height: 200px;
        }

 运行结果如下

 该方法利用的是 css中的层叠性就近原则，同一标签内的多个属性可以层叠，谁离的近就覆盖离得远的，如果上面两行代码互换，则边框全部为蓝色