一 border-width不支持百分比值
1 不符合客观逻辑
2 w3成都一种约定吧
3 边框本身就像是一个包裹内容的界限
类似的还有outline,box-shadow text-shadow均不支持百分比
4 边框宽度的枚举
thin：1px
medium（默认）：3px 因为border-style:double这个样式至少需要3px才会有可视化显示效果，
thick：5px
二 border-style类型
1 solid
2 dashed 虚线
虚线在chrome firefox的稀疏密度为3:1 而ie为1:1所以ie中需要与前面相比较密
3 dotted 点线
点线在ie中为圆点，而chrome和firefox为方框，因此在ie中可使用dotted点线方式圆角效果，但是这个圆角很不明显
3 double 双线
使用得比较少，double的计算规则，中间为透明
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；
8px：3+2+3； 中间为+-1间隔进行，可以看出 double会将边框宽度进行等分，比如border-top：60px double red，那么将会进行这样的拆分，20+20+20 中间为透明也就会看到2跟红色等长线
也就是说双线宽度永远相等，剩余则为中间间隔，
使用double可以实现一些技巧性绘图，且兼容性非常好 如三道横杠
border-top：60px double red；border-bottom：20px solid；
4 inset 内凹
内凹使用非常少，主要用来实现一些有点点质感的样式
5 其他的一些样式一是使用非常少，而是兼容性很差
三 color与border-color
在不显式指定border-color的时候，默认使用color作为边框颜色 如border：1px solid；color：red；这里的边框将显示为红色
使用默认的颜色用途在于只需要改变color时候边框可以与之同步，比如一些使用字图图标的情况下，改变图标颜色，边框也随之改变，如 .box:hover{color:red}
四 border与background定位
1 局限
由于background的定位是相对于边框的左上角，那么要想背景在右边的时候就咋办呢？
那么我们可以将left设置为100%，但是与右边又想要距离，怎么办呢？可以使用border-right：20px solid transparent 右侧具有一个透明20像素的边框就使得背景看起来有一定的间距
五 border与三角图形
1 正三角形
比如一个span：after{0px;height:0px; border-10px;border:}
六 border透明边框
用途非常广，兼容性非常好，常常用于增加鼠标点击响应区增加，透明但是却占据区域；
1 增加响应区域大小
比如我们有一个16*16的单选框，这个时候响应区域非常小，那么增加透明边框如 border：10px solid transparent；由于边框透明了，要想再次显示边框效果，则使用边框阴影效果
box-shadow，进行边框阴影模拟，阴影内陷即可
2 增减可视渲染区域
比如我们想要一张图片改变颜色，可以使用将元素进行滤镜投影，而投影又是可以使用颜色设置，那么我们就可以将元素本身因此，但是投影并不隐藏，此时只有使用透明边框方式，看不见元素本身，因而是投影也
得到显示
如icon{position:relative left -20px;border-right:20px solid transparent;fiter:drop-shadow(20px o #ff0000;)}
七 border在布局中的应用