CSS 深刻理解之 border 【笔记】

本文是对慕课网张鑫旭的课程《CSS 深刻理解之 border》的学习笔记，并结合了一些我的理解。

border-width 不支持百分比

border-width 不支持百分比单位，缘由以下：

• 在实际设计中，边框通常是固定大小的，不会随着盒子宽度的增长而增长

  • margin 和 padding 为百分比单位时，是相对于 containing block 的宽度而言的

• 边框相对于盒子宽度来讲是很小的，若是像 padding、margin 那样支持百分比单位，那么占的百分比数值也将会很小

一样不支持百分比的还有 outline, box-shadow, text-shadow ...

border-width 支持的关键字有 （数值对 IE8+ 有效, chrome 等不太同样，由于标准对具体实现没有规定）

• thin: 1px

• medium: 3px 默认值

  • 为何默认值是 3px 呢？由于border-style: double 至少要 3px 才有效果

• thick: 5px

border-style

• solid

• dashed

  • chrome/firefox 和 IE 的虚线比例不一致

• dotted

  • chrome/firefox 的点是方的，IE 的是圆的

  • 能够用这个来实现 IE七、8下的圆角效果（连接请用 IE 打开）

• double

  • 双线

  • 双线宽度永远相等，中间空白宽度 ±1

  • 可用于实现 menu 三道杠效果，上 border-style 是 double，下 border-style 是 solid。

    • 兼容性好，不须要用伪元素

• inset、outset、groove、ridge

  • 很差看，通常不用

  • 兼容性差

border-color 与 color

• 当没有指定 border-color 的时候，会使用 color 做为边框色

  • 当须要边框颜色和内容颜色一致时能够简化代码

• 相似的还有 box-shadow, text-shadow ...

border 与 background 定位

• background 定位的局限：只能相对于容器的左上角定位，不能相对于右侧定位

  • CSS2 是这样，CSS3 支持（IE9+）

  • 解决办法：

    • 多层标签嵌套

    • 使用 border

      border-right: 50px solid transparent;
      background: 100% 40px;

border 与图形构建

• border-style

  • dotted：IE七、8圆角

  • double：三道杠图标

  • solid：三角、梯形

    • 经过border-color: transparent

    • 下拉按钮、对话框、三角叠加造成更复杂图形

    • 用梯形拼合造成圆角效果，兼容性好

border 与透明边框

• 支持 IE7+，兼容性好

• 使用

  • background 右侧定位

  • 三角图形

  • 增长单选/复选响应区域大小

    • 用盒阴影实现边框，原先的 border 变成透明来增长点击区域

  • 扩大渲染区域，drop-shadow

border 在布局中的应用

• border 与等高布局

  • 用 border 模拟一栏，将内容移至 border 内

  • 缺点：不支持百分比宽度