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 的是圆的

  • 可以用这个来实现 IE7、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：IE7、8圆角

  • double：三道杠图标

  • solid：三角、梯形

    • 通过border-color: transparent

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

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

border 与透明边框

• 支持 IE7+，兼容性好

• 使用

  • background 右侧定位

  • 三角图形

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

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

  • 扩大渲染区域，drop-shadow

border 在布局中的应用

• border 与等高布局

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

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