日期:2014-05-17  浏览次数:20571 次

CSS中的border的是怎么绘画出来的

本来我们设定了一个DIV的width为50px,后来又设定了这个DIV的BORDER的宽度为5PX,那么,浏览器(IE)是怎么绘制这个BORDER的呢,请看下图:



?图①是只设定了width的DIV

当设定了BORDER的宽度后,浏览器是按照下面这个样子去绘制它的:

a) 水平方向: 以图①中DIV的左边界开始,绘制一个BORDER的宽度,接着绘制原DIV宽度的空白,最后,最绘制一个BORDER的宽度。如图②,它的空白处的宽度与图①的宽度是一样大小的。

b) 垂直方向: 以图①中DIV的上边界开始,绘制一个BORDER的宽度,接着绘制原DIV高度的空白,最后,最绘制一个BORDER的宽度。如图③,它的空白处的高度与图①的高度是一样大小的。