CSS理解border的属性

发布时间:2017-03-20

border的属性

定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性:

  • border-width

  • border-style

  • border-color

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,使得与某侧距离固定)