用border-image实现波浪边框

最新推荐文章于 2025-05-16 09:03:05 发布

转载最新推荐文章于 2025-05-16 09:03:05 发布 · 223 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/woodk/p/5386373.html

文章标签：

#javascript #php #ViewUI

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">
    
    <input id="uname" type="text" name="uname" placeholder="收件人姓名" />
    
    <input id="uphone" type="text" name="uphone" placeholder="手机号码" />
    
    <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>

转载于:https://www.cnblogs.com/woodk/p/5386373.html