一天搞定CSS：边框border--02

蔚落 2022-06-16 05:06 240阅读 0赞

**每一个标签都是一个盒子，具体见HTML教程**

**因此，每一个标签有大小，有边框**

--------------------

# 1.border样式：单一样式 #

![这里写图片描述][SouthEast]

--------------------

# 2.border样式：复合样式 #

**border: 粗细 类型 颜色；**

![这里写图片描述][SouthEast 1]

--------------------

# 3.border方向 #

![一天搞定CSS：初识css--01][CSS_css--01]

--------------------

# 4.代码演示 #

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 300px;
                    height: 300px;
    
                    /*单一样式*/
                    border-color: red;
                    border-width: 4px;
                    border-style: solid;
    
                    /*复合样式*/
                    border: 4px solid red;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

边框方向：以top为例

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 300px;
                    height: 300px;
    
                    /*单一样式*/
                    border-top-color: red;
                    border-top-width: 4px;
                    border-top-style: solid;
    
                    /*复合样式*/
                    border-top: 4px solid red;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

[SouthEast]: /images/20220616/bd162ef5db164b06bf707fafcb1408c5.png
[SouthEast 1]: /images/20220616/58cc9ac403de49eba41646629d827206.png
[CSS_css--01]: /images/20220616/0548f4caf5924732a7c24dffcf0093ff.png