CSS深入理解学习笔记之border
2018-06-24 01:37:00来源:未知 阅读 ()
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大小不能为百分比,所以左侧是固定宽度的):
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css绘制常见的几何图形
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash