首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS中的border的是如何绘画出来的

2012-07-01 
CSS中的border的是怎么绘画出来的本来我们设定了一个DIV的width为50px,后来又设定了这个DIV的BORDER的宽度

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

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


CSS中的border的是如何绘画出来的
?图①是只设定了width的DIV

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

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

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

热点排行