接上文,边框的颜色书写规范为
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中的层叠性就近原则,同一标签内的多个属性可以层叠,谁离的近就覆盖离得远的,如果上面两行代码互换,则边框全部为蓝色