border属性指定框的边框区域的宽度、颜色和样式。这些属性适用于所有元素border-width和percentageborder-width不支持percentage:不符合语义,border不会因设备大小而改变border-width默认为medium:3px,因为border-style:double至少3px才有效了解各种border-style类型border-style:dashed虚线,在chrome/firefox中,实点宽高为3:1,实点和虚点的宽比为1:1;在IE中,实点的宽高是2:1,实点和虚点的宽比是2:1。border-style:dotted虚线,在chrome/firefox中,虚线是一个小方块;在IE中,虚线是一个小点。border-style:double双线,计算出来的规则是双线的宽度始终相等,中间间隔为±1.1px:0+1+02px:1+0+13px:1+1+14px:1+2+15px:2+1+26px:2+2+27px:2+3+2使用双线实现三格的效果作为默认的边框颜色。这个特性可以用来实现上传按钮的变色功能,比之前的要好。代码需要减少很多border和background-position的定位。使用background-position定位。background-position定位只能相对于左上角,不能相对于右下角。为了实现右下角的定位,我们可以和border一起使用,因为100%right定位是不计算边框面积的。需要注意的是,只有设置了div的宽高后,background-image才起作用。如果有一定的宽度,就可以实现由4个等边三角形组成的正方形。当宽度和高度变大时,会逐渐演变成4个梯形。使用此功能,您可以模拟具有两个边框和一个矩形的圆角矩形。border和transparentborder可以用在下拉菜单,聊天框等有三角形的地方以及各种图形透明的实现使用边框的第一个例子是在checkbox中使用透明边框来扩大渲染区域。第二个例子是filter:drop-shadow(20px0#ff0000)配合透明边框实现渲染区域的扩大,以及变色边框在布局中的应用利用border实现双栏的优势equal-height布局就是margin和padding都是用很大的负值来实现的,所以如果负值元素有锚点定位就会飞出去,但是用border就没有这个问题。缺点是不支持百分比宽度
