前言
border属性，经常使用，整理下她的小妙招
//border的三个属性值
border：border-width border-style border-color;
border-top:border-top-width border-top-style border-top-color;
//border-style属性对应的值
border-style:dotted | dashed | solid | double; // 点、虚、实、双
border-style:dotted solid; // 上下电线，左右实线
border-style：groove | ridge | inset | outset; //不常用的3D边框效果
//border-width ：需border-style定义后使用
//border-color属性对应的值:name、RGB、hex(16进制值)
border-color:transparent; //transparent 不兼容IE6及以下了解了border属性之后，我们开始摆造型
&普通三角形
//原理：巧用transparent，利用盒子的边，隐藏其他三个边框，显示top的边框,若考虑兼容，其他三个边框背景背景色
.triangle_down_div{ width:0;height:0;overflow:hidden;font-size:0;line-height:0;border-color:orange transparent transparent;border-style:solid dashed dashed;border-width:20px; }tips1:overflow:hidden;font-size:0;line-height:0; IE6会有默认的高度，字体和行高会撑开盒子显示为非正方形
&任意形状的三角形
//原理：利用盒子的对角线，border-width截选四分之一，隐藏另外一个斜边的边框
.triangle_strange_div{ width:0;height:0;overflow:hidden;border-style:solid;border-width:20px 20px 0 0;border-color:orange transparent transparent; }&不规则三角形完成气泡框的方法
//方法一：两个三角形重叠，斜对角的两个三角同色组装成直角
.farther_div{ width:200px;height:50px;position:relative;left:50%;background:orange; }
.farther_div *{ width:0;height:0;overflow:hidden;font-size:0;line-height:0;position:absolute;bottom:0;left:-50px; }
.triangle_base_div{ border-color:transparent orange orange transparent;border-style:solid;border-width:16px 25px; }
.triangle_upper_div{ border-color:transparent #fff #fff transparent;border-style:solid;border-width:8px 25px; }
//利用伪元素，减少标签，达到同样效果
.farther_div{ width:200px;height:50px;position:relative;left:50%;background:orange; }
.farther_div:before,.farther_div:after{ content:"";width:0;height:0;overflow:hidden;font-size:0;line-height:0;position:absolute;left:-50px;bottom:0;border-style:solid;border-width:16px 25px;border-color:transparent orange orange transparent; }
.farther_div:after{ border-color:transparent #fff #fff transparent;border-width:8px 25px; }
//方法二：利用菱角符号◆设置其font-size
//方法三：镂空的三角气泡 第一种通过transform 第二种