5 css中的border属性

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .child {
            width: 150px;
            height: 40px;
            background-color: red;
            border: 1px solid #000;
        }
    </style>

</head>

<body>
    <div class="child"></div>
</body>

</html>
复制代码

border 简写属性在一个声明设置所有的边框属性。

border :1px solid #000; 可拆分为 border-width:1px; 宽度 border-style:solid; 样式(实线) border-color:#000; 颜色

可以看到，宽度、颜色、样式这个三个属性的属性值互相不会冲突，浏览器在解析的时候可以区分他们

可以颠倒三个属性值的顺序

例如

border :solid #0001px; border :#000solid 1px;

在开发中，尤其是团队配合时，需要有个统一的写法，便于理解，有良好的可读性，默认按照 border :1px solid red;的顺序

可以不写其中的一个或多个

不写颜色时，默认使用前景色，即color属性

扫描二维码关注公众号，回复： 6450916 查看本文章

border :1px solid; 等同于 border :1px solid #000; 因为color属性默认值时#000

不指定border-style 是看不到效果的，常用的solid(实线)、dotted(点线)、dashed(虚线) 可以借助开发者工具自行体验下

border :1px solid #000; 还可拆分为

border-top:1px solid #00; 上 border-right:1px solid #000; 右 border-bottom:1px solid #000; 下 border-left:1px solid #000; 左

border-top:1px solid #000; 又可拆分为

border-top-width: 1px; border-top-style: solid; border-top-color: #000;

神奇的border属性

结合前面的文章，我们已经认知了css盒模型的 width、height、padding、margin、border这五个属性，也初步阐述了HTML、CSS的基本常识，以及开发者工具的简单使用。

有的章节中会有一些额外的链接，建议点进去看看，阅读文档是必备的能力，如果能直接阅读英文的文档就更好了。

很多地方直接放截图，是希望能够自己动手敲代码，而不是黏贴复制，更好的方式是阅读完一小段在去自己尝试，而不是边看边敲！

一些跟章节主旨脱离较远的知识点并没有被详细说明，比如1px 、red、rgb(0,0,0)、color 这些，是刻意为之，按部就班的去讲属性是很无聊的一件事，后面一定会提及，有余力的小伙伴可以自行百度下，提前感受下痛楚!或是阅读 www.w3school.com.cn/index.html

保持好奇是很重要的，每天多学一点，相信未来是不可限量的！知识首先在于积累，不要有太多的功利性。

原文地址

上一章 - 4 display属性对其他css属性的影响

5 css中的border属性

猜你喜欢