.box{
				/* width: 100px;
				height: 100px; */
				width: 0;
				border-top:50px solid red;
				border-right:50px solid green;
			}

border-top  border-bottom 受 元素的 width 限制 ，没有width限制可能会变成梯形

border-left border-right    受元素height限制,出来本身就是三角形
情况分类展示：

1.border-left  border-right

此时对称出现在元素左右两侧    height 不为0


2.border-top border-bottom  width不为0


3.对角位置










bottom right
左对角线




top left
左对角线


bottom  left
右对角线


top right
右对角线


可以理解为对折出现的对角线
4.开启三个


5.在4的情况下加上宽度   可以制作梯形



6.四个全开

一、有宽和高

1.一个矩形的4个边的组成部分

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
    border-top: 55px solid green;
}



由图可知，4个border其实都是等腰梯形

2.3个border

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
}



由上图可知，当只有3个border时，缺口部分不再是斜的，变成了水平线。

3。同理当只有2个border时，切口全部变成水平或者垂直

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
}



.box {
  border-top: 55px solid red;
  width: 200px;
  height: 200px;
  border-bottom: 55px solid blue;  
}



二、宽和高有一个为0

1.宽不为0，高为0

（1）4个边



2.3个边



3.2个边



4.有宽，有border-top或者border-bottom。有高，有border-left或者border-right



5.其他 无

(2) 宽为0，高为0

1.4个border



2.3个border



3.2个border（相邻）



4.其他无

1、border边框是外边距和内边距的分界线，在计算元素的宽和高的时候需要border的width计算在内。

2、语法 
border：border-style | border-color | border-width；



3、样式效果展示:

dotted



dashed



solid



double



groove



ridge



4、边框的4条边也可重点内容以单独设置样式和颜色 如 border-top-color：red；

css样式记录： 

    在同时设置border-style: solid;border-color: #f00;border-top: 1px;时发现样式边框并没有显示，经过测试发现，如果border-style与border-color在各个边框设置的前面，则border-style与border-color属性并不会生效。正确的书写顺序是 

border-top: 1px; 

                border-right: 1px; 

                border-bottom: 1px; 

                border-left: 1px; 

                border-style: solid; 

                border-color: #f00; 

border-style与border-color必须在border-width之后。