border-left、border-right、border-top、border-bottom深入理解

一、有宽和高

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.其他无