zoukankan      html  css  js  c++  java
  • 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大小不能为百分比,所以左侧是固定宽度的):

      

      

  • 相关阅读:
    03Qt信号与槽(2)
    01Qt中的隐式共享
    10GNU C语言函数调用
    09GNU C语言程序编译
    第一本C语言笔记(下)
    07控制器和控制卡(3)
    06控制器和控制卡(2)
    集合
    linux指令(目录类操作指令)
    面向对象三大特征
  • 原文地址:https://www.cnblogs.com/tinyTea/p/7171487.html
Copyright © 2011-2022 走看看