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