巧用border

谁践踏了优雅 2022-07-13 13:20 163阅读 0赞

本文原创地址：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/54318682][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应用三角图标：  
![这里写图片描述][SouthEast]

图2 聊天气泡：  
![这里写图片描述][SouthEast 1]

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

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

三角图标效果图：  
![这里写图片描述][SouthEast 2]

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

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

![这里写图片描述][SouthEast 3]

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

![这里写图片描述][SouthEast 4]

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

![这里写图片描述][SouthEast 5]  
是不是很简单啊，当然，你也可以使用IconFont图标，喜欢哪种用哪种==

[http_blog.csdn.net_zhou_xiao_cheng_article_details_54318682]: http://blog.csdn.net/zhou_xiao_cheng/article/details/54318682
[SouthEast]: /images/20220713/15182c7110ff4a968d4ddb000933f59f.png
[SouthEast 1]: /images/20220713/928e3edadf3841a08e94e568def0a3d5.png
[SouthEast 2]: /images/20220713/316b43d13297424080f0ca7101848515.png
[SouthEast 3]: /images/20220713/80215f8d4a304448ba6be09056c15f85.png
[SouthEast 4]: /images/20220713/8f552290ef494ae4935bdcefd32fc3e3.png
[SouthEast 5]: /images/20220713/1db40db986f64a7c97635b6610b20829.png