CSS边框

最新推荐文章于 2024-08-12 09:00:00 发布

shwanglp

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量452

点赞数

本文链接：https://blog.csdn.net/shwanglp/article/details/53470354

版权

CSS中的边框相对于其他的部分在企业开发中是经常使用的，边框部分知识相对来说还是比较的简单的，本文通过简单的例子来说明边框在开发过程中的使用。

CSS中的边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

注意点：如果是简写形式的话边框的顺序：上右下左顺时针

书写6个div的简写形式：div.box$*6 按一下table键就能够生成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            border: 5px solid #000;
        }
        .box2{
            border-width: 5px;
            border-style: solid;
            border-color: red green blue purple;
        }
        .box3{
            border: 5px solid red;
            border-right: 5px dashed red;
        }
        .box4{
            border-width: 5px;
            border-style:solid dashed;
            border-color: red;
        }
        .box5{
            border: 5px solid #000;
            border-bottom:none;
        }
        .box6{
            width: 0px;
            border-top: 10px solid #000;
            border-left: 10px solid white;
            border-right: 10px solid white;
        }
    </style>
</head>
<body>
<div class="box1"></div><hr>
<div class="box2"></div><hr>
<div class="box3"></div><hr>
<div class="box4"></div><hr>
<div class="box5"></div><hr>
<div class="box6"></div><hr>
</body>
</html>

显示结果：