当前位置:Gxlcms > html代码 > CSSborder属性深度讲解

CSSborder属性深度讲解

时间:2021-07-01 10:21:17 帮助过:68人阅读

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大小不能为百分比,所以左侧是固定宽度的):

  

  

以上就是CSS border属性深度讲解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行