盒子模型（边框） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                /*
                    
                    width内容区宽度 height 内容区高度
                    width和height只是设置盒子内容区大小，不是盒子整个大小
                        盒子可见框的大小由内容区，内边距和边框共同决定
                */
                width: 100px;
                height: 100px;
                background-color: #bfa;
                
                
                /*
                    为元素设置边框
                        元素设置边框必须指定三个样式
                        除了border-width还有四个border-xxx-width
                        xxx值可能是top right bottom left设置指定边框宽度
                        border-width：边框宽度（可以分别指定四个边框的宽度）
                            四个值分别设置上右下左
                            如果指定三个值给上 左右 下
                        border-width：10px 20px 30px
                        指定两个值分别给上下 左右
                        
                        以上样式同样适用于以下三种
                        
                        border-width：10px 20px
                        border-color：边框颜色
                        border-style：边框样式
                            可选值：solid 实线 none 默认值无边框
                                   dotted 点状边框
                                   dashed 虚线
                                   double 双线
                */
                /* border: 3px solid #000000; */
                /* border-style: outset; */
            }
        </style>
    </head>
    <body>
        <div class="box1">
            
        </div>
    </body>
</html>

border-width 边框宽度 可分别指定四个边框的宽度 四个值设置给上 右 下 左

border-color 边框颜色

border-style 边框样式

　　可选值 solid 实线

　　　　　 none 默认无边框

　　　　　 dotted 点状边框

　　　　　　dashed 虚线

　　　　　　double 双线

 

posted @ 2021-07-01 21:14  2237774566  阅读(75)  评论(0)    收藏  举报