Summary: border tag of use
border tag can be for the color (Color), pattern (style), the width (width) class as a control,
It can also be controlled for the vertical and horizontal directions.
A color (Color), pattern (style), the width (width) properties
1.border-color
border-color can name, RGB, Hex represented
例如：border-color:blue;、border-color:rgb(0,0,255);、border-color:#0000ff;、
border-color:transparent
2.border-style
Written as a CSS p {border-style: none;}
The following enumeration of each border-style mode
Note, be sure to specify border-style mode when you want to operate the various properties border,
Otherwise, there is no border effect.
3.border-width
Is used to set the thickness of the border,
For example: border-width: 5px; or default three modes
border-width:thin;、border-width:medium;、border-width:thick
aaa
aaa
aaa
Two, can be controlled up and down (border-top, border-bottom, border-left, border-right)
Color (color), pattern (style), the width (width) properties
例如：border-top-color:red;、border-top-style:solid;、border-bottom-width:10px;...等等。
Direction of the intermediate words may be omitted
E.g:
border-style: dotted; dotted scope of the vertical and horizontal
border-style: dotted solid; dotted scope of vertical, solid scope approximately
border-style: dotted solid double; dotted on the scope of, solid scope is about, double the scope of the
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