border妙用

border是一个很有意思的css属性，巧妙使用border，有些效果就可以不用图片

border的关键字：thin，薄的,等同于1px

                            medium(默认值)，中等的，相等3px

                            thick，厚的，等同于4px

border-style的默认值是none而不是solid，所以不设置border-style值的时候是没有边框出现的。

1、border-style:dotted的妙用

我们要实现圆角效果想到的就是border-radius:50%。然而该属性ie8是不支持的，而在IE浏览器下点线是由小圆点组成的。所以我们可以巧妙运用该属性来实现圆角效果，而不用借助图片

比如我们需要一个50px的圆

      .box{
	  	 width:50px;
	  	 height:50px;
	  	 overflow:hidden;
	  }
	  .dotted{
	  	 width:100%;
	  	 height:100%;
	  	 border:50px dotted #cd0000;
	  	 
	  }

<div class="box">
 	<div class="dotted"></div>
 </div>

实现的效果就是这样的

2、border-style:double的妙用

知识点:border-style:double的表现规则：双线宽度永远相等，中间间隔±1

border-style:double实现“三道杠效果”

div{
	  	 width:100px;
	  	 height:20px;
	  	 border-top:60px double;
	  	 border-bottom:20px solid;
	  }

实现的效果:

当border没有设置颜色值的时候，跟字体颜色保持一致

4、实现+号效果

 .add{
	  	 width:76px;
	  	 height:76px;
	  	 color:#ccc;
	  	 border:2px dashed;
	  	 position:relative;
	  }
	  .add:hover{
	  	 color:#34538b;
	  }
	  .add:before,.add:after{
	  	content:'';
	  	position:absolute;
	  	top:50%;
	  	left:50%;
	  }
	  .add:before{
	  	 width:20px;
	  	 border-top:4px solid;
	  	 margin:-2px 0 0 -10px;/*此处是为了居中，-2px为border宽度的一半，向上偏移2实现垂直方向居中，-10px是元素宽度的一半，向左偏移10像素，实现水平方向居中*/
	  }
	  .add:after{
	  	 height:20px;
	  	 border-left:4px solid;
	  	 margin:-10px 0 0 -2px;
	  }

实现效果

方法总结:因为border的颜色是和字体颜色一致，所以hover的时候+号跟随虚线边框的颜色改变，所以不用担心hover时颜色不一致的问题

5、border绘制三角形

等腰三角形

 .san{
	  	 width:0;
	  	 border:10px solid;
	  	 border-color:#f30 transparent transparent;
	  }

效果

一侧开口的三角形效果

 .san{
	  	 width:0;
	  	 border-width:20px 10px;
	  	 border-style:solid;
	  	 border-color:#f30 #f30 transparent transparent;
	  }

效果