一、border-width不支持百分比
边框不会因为设备大就增大,css中类似的还有:outline,box-shadow,text-shadow,...
二、支持关键字
thin:1px
medium:默认值 , 3px (border-style:double 至少3px才有效果)
thick:5px
三、类型
border-style:solid 实线
border-style:dashed;虚线
border-style:dotted:点线
border-style:double:双线
border-style:inset 内凹
可以利用点线实现IE7、8下的圆形
.dotted{ border:150px dotted red}
可以利用双线来实现类似三大杠图标
{width:120px;height:20px;border-top:60px double;border-bottom:20px solid}
四、border-color and color
border-color默认颜色 就是color
精彩案例:hover与图形变色,只要一个color hover变化,就可以一起变色。
五、border 与三角等图形构建
.triangle{ border-width:12px;border-style:solid;border-color:red red red transparent}
因为
.triangle{width:100px;height:100px;border:100px solid;border-color:red green blue orange}
.triangle{width:100px;height:0px;border:0px solid;border-color:red green blue orange}