border 的属性
1.border-width:不支持百分比,支持关键字,thin(1px),medium(默认值,3px,默认值是 3px 的原因是只有当 border 是 3px 及以上时,border-style 才有效
果),thick(5px)
2.border-style: 有不同值,下面分析分别为不同值时的应用
a.solid:可以实现三角,梯形
- <!DOCTYPE html>
- <html>
- <head>
- <title>用solid实现三角和梯形</title>
- <meta charset="utf-8">
- <style type="text/CSS">
- .triangle{
- width: 0px;
- height: 0px;
- border-style:solid;
- border-width: 50px;
- border-color: red transparent transparent transparent;
- }
- .trapezia{
- width: 40px;
- height: 40px;
- border-style: solid;
- border-width: 50px;
- border-color:transparent transparent green transparent ;
- margin-top: 10px;
- }
- </style>
- </head>
- <body>
- <div class="triangle"></div>我是三角形
- <div class="trapezia"></div>我是梯形
- </body>
- </html>
b.dashed: 虚线,在 chrome/Firefox 浏览器中,虚线和实线的比例是 3:1(稀),在 IE 浏览器中,比例是 2:1(密)
c.dotted: 点线,在 chrome/Firefox 浏览器中,是方点,在 IE 浏览器中,是圆点(可以利用圆点实现圆角效果)
d.double: 双线, 计算规则,双线宽度永远相等,中间间隔 +-1,例如,3px=1(内)+1(中间间隔)+1(外),可以实现三道杠图形。
e.inset(内凹),outset(外凸),ridge(沟槽): 风格过时,兼容性差,没有什么使用场景
3.border-color:在不指定 color 时,使用 color 作为边框色,可以利用这一特性,简化链接改变颜色时的 css 样式代码。例如:
- <!DOCTYPE html>
- <html>
- <head>
- <title>鼠标移动时边框颜色的改变</title>
- <meta charset="utf-8">
- <style type="text/css">
- .a{
- width: 30px;
- height: 30px;
- padding: 20px;
- margin:30px;
- color: red;
- border:1px solid;
- }
- .a:hover{
- color: blue;
- /* border:1px solid;
- */ }
- </style>
- </head>
- <body>
- <div class="a">哈哈</div>
- </body>
- </html>
4. 利用 border 可以实现背景图像的定位,因为背景图像在定位时是不计算 border 的
5. 利用 border 实现等高布局,缺点是不支持百分比宽度
(4,5 类似,都是利用 border,使得与某侧距离固定)
来源: http://www.bubuko.com/infodetail-1985065.html