摘要:border tag的使用
border tag可以针对颜色(color)、模式(style)、宽度(width)类做控制，
也可以针对上下左右方向控制。
一、颜色(color)、模式(style)、宽度(width)属性
1.border-color
border-color可以使用name、 RGB、 Hex来表示
例如：border-color:blue;、border-color:rgb(0,0,255);、border-color:#0000ff;、
border-color:transparent
2.border-style
一个CSS写法如p {border-style: none;}
以下枚举各border-style模式
注意，当你要操作border的各种属性时务必指定border-style模式，
否则border就没效果。
3.border-width
被用来设定border的粗细，
例如：border-width:5px;或默认的三种模式
border-width:thin;、border-width:medium;、border-width:thick
aaa
aaa
aaa
二、可控制上下左右(border-top、border-bottom、border-left、border-right)
的颜色(color)、模式(style)、宽度(width)属性
例如：border-top-color:red;、border-top-style:solid;、border-bottom-width:10px;...等等。
也可以省略方向中间词
例如：
border-style: dotted; dotted影响范围为上下左右
border-style:dotted solid; dotted影响范围为上下，solid影响范围为左右
border-style: dotted solid double; dotted影响范围为上，solid影响范围为左右，double影响范围为下
border-style: dotted solid double dashed; dotted影响范围为上，solid影响范围为右，double影响范围为下，dashed影响范围为左(顺时钟)
由上可知，border-color与border-width一样类推
三、border shorthand property可控制颜色(color)、模式(style)、宽度(width)属性
例如：border: 5px solid red;
上例属性可不必按照顺序排列
另外一种模式为包含方向中间词
例如：border-top: thick double #ff0000;
四、范例
1、利用border属性来做三角形
2、对话框
CSS Talk Bubble configured by classes. Defaults to square shape, no triangle. Height is auto-adjusting to the height of the text.
This one adds a right triangle on the left, flush at the top by using .tri-right and .left-top to specify the location.
This talk-bubble uses .left-in class to show a triangle on the left slightly indented. Still a blocky square.
And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.
Now we add a border and it looks like a comic. Uses .border .round and .btm-left-in
Now flipped the other way and square. Uses .border and .btm-right-in
Flush to the bottom right. Uses .btm-right only.
Moving our way back up the right side indented. Uses .round and .right-in
And finally on the right flush at the top. Uses .round .border and .right-top
3、面包屑路径
CSS Breadcrumbs demo
参考数据：
CSS三角形产生器
How To Create Flat Style Breadcrumb Links with CSS