设为首页 加入收藏

TOP

CSS深入理解学习笔记之border
2017-10-10 16:45:17 】 浏览:9036
Tags: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大小不能为百分比,所以左侧是固定宽度的):

  

  

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇CSS nth-child、first-child、las.. 下一篇前端通用框架可行性研究报告之弹窗

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目