首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS深入理解学习笔记之border

CSS深入理解学习笔记之border

作者头像
就只是小茗
发布2018-03-07 14:32:04
7160
发布2018-03-07 14:32:04
举报

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-07-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档