简单实用的css边框属性border

本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。

预备知识

border相关属性

• border-width 边框的宽度
• border-style 边框的样式
• border-color 边框的颜色

案例举例

为了更加通俗易懂，demo用的是最简单的dom元素和css属性

    
商品介绍
    

    
商品评价

.border{
    margin: 50px auto;
    width: 540px;
    font-size:18px;
    line-height: 40px;
    text-align: center;
}
.border-left{
    width: 260px;
    height: 40px;
    background: #f3941d;
    float: left;
    color: #fff;
}
.border-icon{
    width: 0px;
    height: 0;
    border-width: 40 20 0 0;
    border-style: solid;
    border-color: #f3941d #f5d7b7 #f3941d #f3941d;
    float: left;
}
.border-right{
    width: 260px;
    height: 40px;
    float: right;
    background: #f5d7b7;
    color: #aaa;
}

上面的css代码重点在于左边较深颜色与右边较浅颜色中间有一个三角形.border-icon

    

        

        
介绍
        

    

.content{
    margin: 60px auto;
    width: 540px;
    height: auto;
    position: relative;
    border-top: 1px solid #ddd;
}
.border{
    position: absolute;
    margin-top: -15px;
    margin-left: 20px;
}
.text{
    background: #e14340;
    height: 70px;
    width: 60px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}
.small-triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px 10px 0px 0px;
    border-style: solid;
    border-color: #fff #c33a37 #ccc #ddd;
    margin-left: -10px;
}
.big-triangle{
    width: 0;
    height: 0;
    border-width: 8px 30px;
    border-style: solid;
    border-color: #e14340 #e14340 #fff #e14340;
}

上面的css代码重点在于左边较深颜色的小三角.small-triangle和底部的三角.big-triangle

原理解析

那么border属性是如何变化出不同的几何形状呢？

.border1{
    width:0; 
    height:0; 
    border-width:20px 20px 20px 20px; 
    border-style:solid; 
    border-color:#aaa #bbb #ccc #ddd;
}

看看上述样式产生的是一个什么样子的内容

我们通过border-width border-color可以任意变化每一条变的宽高，和颜色。
任意组合就能组成不同的由三角形组成的其它几何形状了。

更多内容可关注微信公众号：有一个姑娘在coding
好好学习，快乐编码