CSS盒模型

二、CSS 盒模型

1.边框

围绕着内容和内填充区域的线

        1.border-width:边框的宽度

        单位：像素

        注意：只写一个border-width设置不上边框的宽的，得写上边框的线型

        2.border-style：边框的线型

          1.solid 单实线

          2.double 双实线

          3.dashed 条状虚线

          4.dotted 点状边框

          5.none 没有边框

        3.border-color:边框的颜色

          1.关键词

          2.十六进制色值

          3.rgb()

          4.rgba()

          默认边框的颜色为元素本身的前景色

          4.复合写法

          例子：

          border-color: pink； 一个值：四个边框

          border-color: pink gold; 两个值：上下边框 左右边框

          border-color: pink gold greenyellow; 三个值：上边框 左右边框 下边框

          border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)

          border-width和border-style同样效果

        5.单独设置

        例子：

         /* 上边框 */

        border-top-width: 50px;

        border-top-style: solid;

        border-top-color: yellow;

         /* 下边框 */

        border-bottom-width: 50px;

        border-bottom-style: dashed;

        border-bottom-color: brown;

        单边框复合写法：

        border-left: 50px solid cyan;

        边框的宽度 边框的线型 边框的颜色

        6.边框的复合写法

        border:边框的宽度 边框的线型 边框的颜色

        border: 100px solid purple;

        7.去掉边框

        border:0;

        border:none;利用边框实现三角形

 用边框实现三角形的规律:

 盒子大小宽高为0

 要那个三角形，他的对边为none，他相邻的边框的颜色为透明色，transparent

 /* 上三角形

       实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色

        

         */

        .box1 {

            width: 0;

            height: 0;

​

            /* border: 100px solid tomato;

​

            border-bottom: none;

            border-left-color: transparent;

            border-right-color: transparent; */

​

            border-top: 100px solid tomato;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

​

        }

​利用边框实现梯形

 /* 用边框实现梯形的规律

        盒子大小不能为零

         要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent */

​

        /* 上梯形

        

        实现上梯形，对边为none，也就是下边框为none，左右边框的颜色为透明色 */

​

        .box1 {

            width: 100px;

            height: 100px;

            /* background-color: brown; */

            /* border: 100px so