盒子-边框

border-width可以不写，浏览器会自己设置，可能为3PX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: lightgreen;
            /*border-width值
            四个值：上 右 下 左
            三个值： 上 左右 下
            两个值： 上下 左右
            一个值：上下左右
            还有border-xxx-width
            xxx:top,left,right,bottom，单独指定一个边的宽度
             */
            border-width:10px;
           
            /*border-color也可以用四个颜色组成，一般不会这样子
            规则跟border-width 
            不写就是默认值，为黑色  */
            border-color: red;
            /*   border-style
            solid 实线
            dotted  点状虚线
            dashed  虚线
            double  双线
            也可以为四部分组成
            默认值是none,表示没有边框
              */
            border-style: double;
            /*
            border简写，通过该属性可以设置边框的所有相关样式，并且没有顺序要求
            */
                  /* border: red solid 10px; */
                  /* border-top:solid red 10px; */
                  border: red solid 10px;
                  border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

 

posted @ 2021-02-14 20:53  俗气小博  阅读(47)  评论(0)    收藏  举报