border

1. border-width 不支持百分比值

YY：由 border 的语义和使用场景决定的（边框不会因为元素变大就想要一个大的边框）。
类似的还有：outline, box-shadow, text-shadow, ...

border-width 支持关键字: thin - 1px, medium(default) - 3px, thick - 5px
Q: border-width: 为啥默认是 medium(3px)？
A: border-style: double; 这个属性要生效，border-width 至少要 3px（YY）。

2. border-style

1. solid

2. dashed 虚线

   
   
   

   虚线比例数据

3. dotted 点线

   
   
   

   点线形状不同

4. double 双线
   兼容性好~
   计算规则：双向宽度永远相等，中间间隔 +/- 1。

   
   
   

   双线计算规则

5. 其他省略...

3. border-color 与 color

border-color 的默认颜色就是 color，类似的还有 outline, box-shadow, text-shadow~

实例

4. border 与 background 定位

实现图片距右边等间距（css 2.1）

实现

5. border 与三角等图形构建

原理如 inset，产生凹槽什么的~

border 与三角等图形构建1

border 与三角等图形构建2

6. border 与透明边框

1. 透明边框增加可点击区域

   
   
   

   透明边框增加可点击区域

2. 增加可视渲染区域
   css3 中增加 drop-shadow 滤镜，可以为 png 图标染色。但是在 Chrome 中，页面不可见元素的 drop-shadow 也是不可见的，所以使用 border 增加可视区域 hack 一发。

   
   
   

   增加可视渲染区域

7. border 实现两列等高布局

缺点：不支持百分比

border 实现两列等高布局