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