border模型详解

原创 zheling 随笔 CSS3 63阅读 23 天前 举报

先给出HTML代码:


如图,border模型是由四个梯形(或三角形)围绕content构成的,border-width表示粗细,即梯形(或三角形)的高,
当content的宽高为零则取四个三角形,
若content的宽高非零则取四个梯形。


画各种三角形只需要直接截取边框即可。
当不显式设置某条边框时,默认为无,此时会直接截去一个矩形或整个三角形,其中矩形包含了整个边框三角形;
而在梯形中截去的矩形是不一样的(以梯形的高和顶边作为截去矩形的宽高)。如图,以去掉border-bottom为例。

同理,再去掉一条边框就可以得到 boxB 的1/4正方形,再通过设置边框颜色属性为transparent透明即可得到三角形。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复