用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 >