第一节：border-width的特性

border-width 不支持百分比

• 原因：border 的语义决定，所谓border边框，不会因为设备的大小的变化而按比例变化，所以百分比单位不符合语义。
• 另外 CSS3 中类似不支持百分比的属性还有 outline,box-shadow,text-shadow,……

border-width 还支持关键字：

• thin: 1px
• medium(默认值): 3px
• thick: 5px

为什么border-width的默认值是medium(3px)呢？明明thin(1px)更加常用！

因为border-style: double至少要3px才有效果。

第二节: 各种border-style类型

• border-style: solid实线，很熟，pass image

• border-style: dashed 虚线， image

image

• border-style: dotted 点线， image image IE 中可以使用 dotted 实现圆角哦！ image 用overflow: hidden隐藏不必要的区域，只显示一个圆。 image 也可以实现任意大小圆角，只需要多构建几个图形， image

• border-style: double双线 image 计算规则：双线宽度永远相等，中间间隔 ±1 image 兼容性很好，可以用来绘制图形， image

• border-style: inset 内凹， image

• border-style: outset 外凸 image

• border-style: groove 沟槽 image

• border-style: ridge 山脊 image

以上四种毫无价值：风格过时+兼容性差

image

第三节：border-color与color

• border-color 就是 color，换句话说，border-color 默认颜色就是 color
  

  image

• 类似的属性还有 box-shadow,text-shadow,……

• 使用案例：hover 图形变色，传统方法需要三处 CSS 变色，使用该技巧只需要一处 CSS 变色
  传统方法实现：

  image
  利用borer实现： image 一起变色，且transition 过渡颜色也只要设置一次 image

第四节：border与background定位

• background定位的局限：只能相对于左上角数值定位，不能相对右下角
  怎么办？ 可以借助 border大法，只要在右侧设置一个需求宽度的透明border即可

第五节：border与三角等图形构建

• 温故而知新： image
• 实现三角形 image
• 实现梯形 image
• 三角是如何产生的 image
  只要将其他三个设置为透明即可 image

• 实际应用场景：各种三角、尖角

  
  image

• 更加高级应用：模拟圆角
  （好处：兼容性好，border-radius 低版本 IE 不支持 ）

  image
  实现原理 image
  放大看详情：上边的梯形 image

第六节： border与透明边框

border的透明边框很有用！因为：始于 IE7 ，足够兼容！

• 实例场景

  image
  传统设计 image
  border透明边框用来增大点击区域，需要显示的边框用box-shadow阴影来代替 image

• 高级实例场景：用drop-shadow可以给png图标赋色

  image
  然后通过 position定位 和 overflow: hidden 使图标变色。

但是！！ image

image
image

第七节：border在布局中的应用

• border与等高布局

image image

• 好处：如果是padding,margin实现，因为使用了很大的负值，所以在锚点定位时候会出问题，而border不会出现此问题
• 坏处：不支持百分比宽度