border-image的介绍

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

先看一个效果：

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

实战应用

需要实现的效果：

这是一个底边波浪的样式。我们按照最上面的方法，对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>