CSS盒子模型 以及Border

Document div{ width: 200px; height: 200px; background-color: silver; /* border 和 background 都是复合属性 */ /* 上边框粗细 */ border-top-width:10px ; /* 边框的粗细类型 */ border-top-style:solid ; /* 想让边框的粗细显示出来，必须规定边框的样式 */ /* none无样式 solid实线边框 dotted点状边框 double双线边框 hidden与none相同，应用于表解决边框冲突 */ /* 边框的默认颜色为黑色 */ border-top-color: red;/* transparent透明色 */ /* 顺序上右下左 */ /* 边框 border-style: solid; 复合属性可以一起*/ /* 颜色 border-color: red; 复合属性可以一起 */ } </style>

div{ /* 利用border属性展示一个三角形 / width: 0px; height:0px; / background-color: red; border-top-style: solid; border-top-width: 100px; border-top-color: blue; border-right-style: solid; border-right-width: 100px; border-right-color:rebeccapurple; border-bottom-style: solid; border-bottom-width: 100px; border-bottom-color:greenyellow; border-left-style: solid; border-left-width:100px; border-left-color:orange; / / transparent透明色 */

        border-style: solid;
        border-color:transparent ;
        border-width: 50px;
        border-left-color:red ;
         /* 复合属性  border：边框宽度 颜色 线框
                border-top 也是复合属性    */
        /* border:100px transparent solid; */
        border-left-color:blue;
    }