border的一些理解

1、border-width

（1）border-width不支持百分比，受其本身的语义和使用场景决定的。border 没有继承性，如果使用百分比，那么就没有参考对象，浏览器解析就不知道

百分数应该乘以谁来确定边框的宽度，所以只能用指定值的大小来确定。

（2）border-width还支持关键字：thin(1px),medium(默认值，3px),thick(5px)

（3）为什么默认设置是medium(3px)？

是因为：border-style:double要设置 3px，才能有效果。

2、border-style

   

    border-style:solid ,实线

     border-style:dashed 虚线  只能安安静静的做一个虚框（由于其兼容性问题，在IE和谷歌浏览器下显示比例不一样）

     border-style:dotted  点线 ：

  border-style:double    双线  ：兼容性好，可以用于绘制图形

计算规则：双线宽度永远相等，中间间隔+-1  绘图例子：

             

border-style:inset   内凹

3、border-color与color：

  （1）在没有指定border-color时，会使用color作为边框色。

典型案例：

4、border 与background定位

（1）在css2中background定位是具有局限性的：它只能相对左上角数值定位，不能相对于右下。

    如：background-position:

(2)在css2.0中 background-position如何实现相对于右边定位呢？ 利用border

background-position：100%  都是相对于右下角定位的

5、border与三角等图形的构建

    

三角变化例子：

通过改变width、height 以及border-color对应的颜色和透明度

（1）                                                                （2）                                            （3）

   

（4）三角形

实际应用：                                                     梯形：

     

6、border-与透明边框

（1）始于ie7，兼容性好

 drop-shadow 投影实现图标颜色变换