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