• CSS深入理解学习笔记之border


    1、border-width

      border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。

      border-width支持关键字:thin、medium(默认)、thick,其大小分别是1px、3px、5px(IE7除外)。

      border-width默认值为何是medium(3px):因为border-style为double的情况下至少要3px才能看出效果。

    2、border-style

      border-style为dashed的一些有趣数据:

      

      border-style为dotted的浏览器差异:

      

      IE的圆点效果可以用来实现IE7/8下的圆角效果。

      border-style为double的计算规则:两边边框永远相等,中间间隔±1。

      border-style为double实现三等分图标:

    3、border-color

      border-color与color的关系:border-color默认与color值相同,类似的还有box-shadow、text-shadow等。

    4、border与三角等图形构建

      利用border的solid风格,可以巧妙的实现三角的构建:

      

      也可以通过拼接的方法,上下两个小梯形,形成圆角的效果:

        

    5、border与透明边框

      透明边框的功用:

    • 增加点击区域。
    • 增加可视渲染区域。

     6、border在布局中的应用

       border实现等高布局(border大小不能为百分比,所以左侧是固定宽度的):

      

      

  • 相关阅读:
    AC 自动机
    [P4735] 最大异或和
    [HNOI2006] 最短母串问题
    [SHOI2002] 取石子游戏
    [NOI2014] 动物园
    [BZOJ2839] 集合计数
    【Spark】object not serializable (class: A)
    【Hbase】Master startup cannot progress, in holding-pattern until region onlined.
    Hbase 各个角色的工作。
    hbase region均衡机制
  • 原文地址:https://www.cnblogs.com/tinyTea/p/7171487.html
Copyright © 2020-2023  润新知