本文原创地址: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图标,喜欢哪种用哪种==