CSS 深入理解 border

第一节：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不会出现此问题
• 坏处：不支持百分比宽度