盒子模型（框模型）——边框 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型（框模型）——边框</title>
        <style type="text/css">
        /* 
            边框（border）
                不指定宽度，边框也会有一个默认宽度，一般是3px
                不指定颜色会默认使用字体颜色
                border-style的默认值是none
                边框简写属性border，通过该属性同时设置四个方向边框的宽度，颜色，样式，并且没有顺序要求
         */
            .box{
                width: 100px;
                height: 100px;
                /* border-style: solid; */
                /* 
                    border是边框，通过该属性同时设置四个方向边框的宽度，颜色，样式，并且没有顺序要求
                 */
                /* border:1px red solid; */
                
                /* 
                    border还有以下四个
                        border-top
                        border-right
                        border-bottom
                        border-left
                 */
                border-top: 2px solid blue;
                border-right:3px double red;
                border-bottom: 4px dotted yellow;
                border-left: 5px dashed #00FFFF;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

posted @ 2022-05-09 13:29  氯丙嗪  阅读(28)  评论(0)    收藏  举报