边框

首先区分两个概念：单样式和复合样式

示例1：

单样式：

border-top-width:5px;
border-top-style:solid;
border-top-color: red;

border-right-width: 10px;
border-right-style:solid;
border-right-color:yellow;

border-bottom-width: 15px;
border-bottom-style: solid;
border-bottom-color: pink;

border-left-width: 20px;
border-left-style: solid;
border-left-color: green;

 复合样式:border：边框宽度 样式 颜色　　　　边框顺序：上 右 下 左

border-top:5px solid red;
border-right:10px solid yellow;
border-bottom:15px solid pink;
border-left:20px solid green;

　　　　

示例2：将盒子宽、高设为0，边框5，边框形状？

<style>
    div{
        width: 0;
        height:0;
        border:5px solid red;
        border-top-color:black;
    }
</style>

示例3：将示例2边框颜色设为white，（2红色部分）因与背景色相同，视觉上变成三角。

　　　　当分别设置right、bottom、leftt边框颜色为黑色时，三角箭头指向不同点方向。