首页 > 代码库 > CSS深入理解之border篇

CSS深入理解之border篇

2024-09-09 03:50:34   219人阅读

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

CSS深入理解之border篇


联系
我们