border-width
border-width不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。因此从语义上来说，边框支持百分比毫无意义。text-shadow/box-shadow/outline也有相同语义
border-width的默认标识为medium，因为border-style为double时支持的最小宽度为3px
border-style
- solid – 一条实线
- dashed – 在Chrome/Firefox 和 IE 上渲染效果有宽高比区别，适合单纯作为虚线框使用
- dotted – 在Chrome/Firefox上实线部分以方格图案展示，IE上实线部分以圆展现。可利用该特性在IE8上实现圆角
- double – 由两条实线和一条虚线组成，实线宽度相等，虚线宽度为总宽度-实线宽度*2。可利用该特性实现菜单效果
- 其他3D效果兼容性不佳，谨慎使用
border-color
在未设置border-color时，color作为边框色，border-color不会继承。text-shadow/box-shadow类似。
可以利用该特性实现图标hover变色的效果
https://codepen.io/curlywater…
border与background定位
background-position不计算border区域，只限于padding以内的盒子。可以利用这一特性实现背景图片距离容器右侧定位
border与三角等图形构建
利用border相交会产生边缘等分的内嵌效果，可以实现三角、梯形等图形构建
https://codepen.io/curlywater…
常见的应用
https://codepen.io/curlywater…
border与透明边框
边框使用box-shadow，原先border变透明来增加点击区域
使用背景透明的图片+drop-shadow实现图标颜色修改：相对定位向左偏移，设置右边框，外部容器使用overflow:hidden隐藏原始图标
border与布局
border实现等高布局
局限：不支持百分比，只可左边区域根据右边区域变化
