CSS 深入理解之 border 【笔记】

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

border-width 不支持百分比

border-width 不支持百分比单位,原因如下:

  • 在实际设计中,边框一般是固定大小的,不会随着盒子宽度的增加而增加

    • marginpadding 为百分比单位时,是相对于 containing block 的宽度而言的

  • 边框相对于盒子宽度来说是很小的,如果像 paddingmargin 那样支持百分比单位,那么占的百分比数值也将会很小

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

border-width 支持的关键字有 (数值对 IE8+ 有效, chrome 等不太一样,因为标准对具体实现没有规定)

  • thin: 1px

  • medium: 3px 默认值

    • 为什么默认值是 3px 呢?因为border-style: double 至少要 3px 才有效果

  • thick: 5px

border-style

border-colorcolor

  • 当没有指定 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 内

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

    原文作者:言十八
    原文地址: https://segmentfault.com/a/1190000008231916
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞