边框

.border 

<div class="border">
	内容
</div>

虚线边框

.border-dashed 

<div class="border-dashed">
	内容
</div>

圆角边框

class="border radius-10"

强制设置直角 class="border radius-0"

数值： 4 ~ 25

数值： 50，55，60，65，70，75，80

数值(百分比)： 10p，20p，30p，40p，50p 


<div class="border radius-10">圆角边框</div>
<div class="border radius-10p">百分比圆角边框</div>

边框加粗

.border-2

数值：2 ~ 5

强制去掉边框线：border-0 


<div class="border-2">
	内容
</div>

边框边线

.border-t
.border-b
.border-l
.border-r 

<div class="border-t">
	内容
</div>
<div class="border-b">
	内容
</div>
<div class="border-l">
	内容
</div>
<div class="border-r">
	内容
</div>

扩展效果

  • 首页
  • 新闻
  • 产品
  • 我的
    • 		
<style type="text/css">
.nav li {
	width:25%; float:left; border-right:1px #ddd solid; text-align:center;box-sizing: border-box;
}
</style>	
<div class="w50 f-l nav pt-20 pb-20">
	<li>首页</li>
	<li>新闻</li>
	<li>产品</li>
	<li class="border-r">我的</li>
</div>