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属性深度讲解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
223
