css冷门知识:关于border属性的默认颜色

border的默认颜色


我们知道border是一个复合属性

.wrap{
            border: 1px solid red;
        }

可以拆分为

.wrap{
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }

那么有没有思考过,当我们只设置border-width 和 border-style的时候,border的默认颜色是什么呢?白色?黑色?还是transparent? 让我们来测试一下;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 100px;
            height: 100px;
            border-width: 5px;
            border-style: solid;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

这里写图片描述

这里可以看到是黑色的,那么一定是黑色的吗?其实不然,我们改变字体颜色试试;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 100px;
            height: 100px;
            border-width: 5px;
            border-style: solid;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

这里写图片描述

当我们将字体颜色改成blue时,边框的颜色也变成blue了;


总结:如果没有设置border-color , 那么边框将取元素内容的前景色,也就是文本的颜色,即color属性对应的颜色。

没有更多推荐了,返回首页