border详解

border属性指定了盒的border区的width，color和style。这些属性适用于所有元素

border-width与百分比

border-width不支持百分比:不符合语义,边框不会因设备大小而变化

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+0
2px:1+0+1
3px:1+1+1
4px:1+2+1
5px:2+1+2
6px:2+2+2
7px:2+3+2

使用双线实现三道杠效果

border-color与color

没有指定border-color的时候,color会作为默认的border-color

可以利用这个特性,来实现上传按钮变色功能,比以往的代码要减少很多

border与background-position定位

使用background-position定位

background-position定位只能相对于左上角,不能相对于右下角,为了实现右下角的定位,我们可以配合border使用,因为100%右侧定位不计算border区域

这里需要注意的是,div设置了宽高,background-image才起作用

border与三角等图形构建

利用border实现三角,梯形以及模拟圆角

当width和height都为0时,border如果果有一定宽度,可以实现由4个等边三角形组成的正方形,width和height变大后,会逐渐演变成4个梯形

利用这种特性,可以通过两个border和一个矩形模拟圆角矩形

此外还可以利用在下拉菜单,聊天框等有三角形状的地方

border与透明框

border-color:transparent始于IE7,兼容性很好,因此我们可以通过透明框做很多事情

比方说前面的图片右侧固定定位以及各种图形的实现

透明边框的使用案例

第一个例子是在checkbox中使用透明框扩大渲染区域

第二个例子是filter:drop-shadow(20px 0 #ff0000)配合透明框实现渲染区域扩大,图标变色

border在布局中的应用

使用border实现两栏等高布局

使用border的好处是因为margin和padding使用很大的负值实现,所以如果负值元素有锚点定位则会飞出去,而使用border则没有这种问题,缺点是不支持百分比宽度