巧用border

本文原创地址：http://blog.csdn.net/zhou_xiao_cheng/article/details/54318682，未经博主允许不得转载。
相信对于很多人来说，CSS中的border属性并不陌生，我们经常使用它来设置元素的边框样式，但是，border属性还有着许多惊人的用处。

基本介绍

border是border-width、border-style及border-color的简写。这三个属性的介绍如下：

• border-width。

  border-width: 任意表示长度的值（如5px、5%等） | thin | medium（默认值） | thick | inherit

• border-style。

  border-style: none（默认值） | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

• border-color。

  border-color: transparent(默认值) | 任意表示颜色的值（如#333、 blue等） | inherit

  注意： 虽然有默认值一说，但因为各浏览器间存在差异，所以，即便可以减少一些代码量，一味过度地依赖默认值并不是明确的选择。当明确属性值为默认值时，建议把它显示地进行赋值。如：在chrome浏览器中，border-color属性值默认并不是transparent(透明色)，而是黑色。
  在为border赋值时，赋值的顺序自己怎么喜欢怎么来，当然，在赋值的时候，你也可以任意省略其中的一个甚至两个，如果忽略掉border-style的值，因为其默认值为none，所以不论另外两个属性值如何，都不会显示边框，这一点需要特别注意。下面的书写都是合法的：

  div {  border: 20px #e6e6e6 solid;}

  div {  border: #e6e6e6 solid; //省略了border-width}

巧用border

相信大家对上面border的一些基本介绍并不陌生，接下来，我将会介绍border其他的一些使用。
在很多应用中，我们都不难发现三角图标，类似下边这样的：

图1 Web应用三角图标：

图2 聊天气泡：

那么，这些三角图标是怎样制作的呢？其实很简单，使用border属性便可轻松解决。
话不多说，看代码：

div {  border: 20px solid transparent;  border-left-color: #e6e6e6;}

三角图标效果图：

稍微做些修改，就可以得到各种方向的三角图标啦，朝上和朝下这两个方向的三角图标不要忘了加上 display: inline-block;，因为<div>是块级元素，默认是占满一行的，设置display: inline-block;后，<div>的大小就由border-width的大小决定了。
剩余三个方向的图标如下：

div {  display: inline-block;  border: 20px solid transparent;  border-top-color: #e6e6e6;}

div {  border: 20px solid transparent;  border-right-color: #e6e6e6;}

div {  display: inline-block;  border: 20px solid transparent;  border-bottom-color: #e6e6e6;}

是不是很简单啊，当然，你也可以使用IconFont图标，喜欢哪种用哪种==