CSS border边框的用法

作者: 氢金 | 来源:发表于2019-07-11 15:07 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框盒子学习</title>
        <style type="text/css">
            /* 全写模式↓ */
            .box{
                /* 分辨率1920*1080 在同一面积下小格子越多图像就越清晰*/
                /* 设置 单位为px（像素） */
                width: 200px;
                height: 200px;
                /* 表示给盒子谁知边框的宽度 */
                border-width: 3px;
                /* 表示设置盒子的风格 */
                border-style:solid;
                /*设置边框的颜色 */
                border-color: mediumvioletred;

            
            }
            /* 简写方法↓↓ */
            .box2{
                width: 200px;
                height: 200px;
                border:3px solid olivedrab;
            }
            
        </style>
        
    </head>
    <body>

        <div class="box">我是第一个盒子(繁重的写法)111</div>
        <div class="box2">我是第二个盒子（简便的写法）222</div>
        
    </body>
</html>

浏览器效果