用border-image实现波浪边框

border-image的介绍 

http://www.w3school.com.cn/cssref/pr_border-image.asp 

先看一个效果：

 

http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image

 

实战应用

原理查看： http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image 详解、应用及jquery插件/

 

需要实现的效果： 

这是一个底边波浪的样式。我们按照最上面的方法，对border-image的裁剪位置进行设置，并把上，左，右的边框设置为0即可。

上图的实现是把表单部分作为一个div，下边框设0；波浪边框实际上也是一个div，视觉上就连在一起了。

图片 

代码

css：

.form-wrap {
  padding-top:  0.76rem;
  padding-left:  0.37333333rem;
  padding-right:  0.37333333rem;
}
.form-wrap .mc {
  background:  #fff;
  border:  1px solid #eee;
  border-bottom:  0;
  padding-top:  0.76rem;
  padding-left:  0.61333333rem;
  padding-right:  0.61333333rem;
  padding-bottom:  0.76rem;
  width:  100%;
}
.form-wrap .mbd {
  height:  0;
  content:  " ";
  display:  block;
  width:  100%;
  margin:  0 auto;
  border:  14px solid transparent;
  -webkit-border-image:  url(../images/form-border.png) 0 0 14 round;
   /*  Safari and Chrome  */
  border-image:  url(../images/form-border.png) 0 0 14 round;
  border-top:  0;
  border-left:  0;
  border-right:  0;
}

html: 

< form  id ="awesomeForm"  action ="/lights/camera"  method ="post" >
   < div  class ="mc" >
     <!--  <label for="yourName">Name</label>  -->
     < input  id ="uname"  type ="text"  name ="uname"  placeholder ="收件人姓名"   />
     <!--  <label for="email">Email</label>  -->
     < input  id ="uphone"  type ="text"  name ="uphone"  placeholder ="手机号码"   />
     <!--  <label for="birthday">Birthday</label>  -->
     < input  id ="uaddress"  type ="text"  name ="uaddress"  placeholder ="详细地址"   />
   </ div >
   < div  class ="mbd" ></ div >
   < div  class ="mb" >
     < button  type ="submit"  class ="button button-disabled" >保存 </ button >
   </ div >
</ form >