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>

用border-image实现波浪边框的更多相关文章

  1. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  2. Row Border in DataGrid 表格边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. border——边框属性

    一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...

  4. 微信小程序 —— button按钮去除border边框

    button默认有边框,边框用“border : none”去掉就不可以,边框依然存在, 使用 button::after{ border: none; } 来去除边框,边框就没了 wxml: < ...

  5. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  6. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  7. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  8. CSS魔法堂:重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  9. 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...

随机推荐

  1. 【bzoj1606】[Usaco2008 Dec]Hay For Sale 购买干草

    题目描述 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛.他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草.  顿因有H(1≤H≤5000)包干草,每一包都有它的体 ...

  2. Teredo 是一项 IPv6/IPv4 转换技术

     Teredo 是一项 IPv6/IPv4 转换技术,能够实现在处于单个或者多个 IPv4 NAT 后的主机之间的 IPv6 自动隧道.来自 Teredo 主机的 IPv6 数据流能够通过 NAT,因 ...

  3. [matlab] 矩阵操作

    >_<:矩阵构造 1.简单矩阵构造 最简单的方法是采用矩阵构造符“[]”.构造1´n矩阵(行向量)时,可以将各元素依次放入矩阵构造符[]内,并且以空格或者逗号分隔:构造m´n矩阵时,每行如 ...

  4. 用js进行日期的加减

    如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...

  5. [转]Java数组初始化详解

    一维数组1)   int[] a;   //声明,没有初始化 2)   int[] a=new int[5];   //初始化为默认值,int型为0 3)   int[] a={1,2,3,4,5}; ...

  6. javascript获取ckeditor编辑器的值(实现代码)

    CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instan ...

  7. mui 重写back 调用back方法,实现返回就即时刷新页面

    需求: 从A-----b页面  B操作完后再返回A ,这时A页面数据变化 1.先是针对安卓机可以点击按钮返回,也可以用本机的返回键返回 监听本机的返回按钮,如果点击就调用写好的自定义刷新事件 (fun ...

  8. n阶行列式计算----c语言实现(完结)

    花了半天时间,写了这个n阶行列式计算的程序,应该算是比较优美吧,有很多地方多次做了优化,程序占用内存不是很大,要是说小吧,也不合适,因为里边有一个递归,而且递归的深度还比较深.时间复杂度具体没有细看, ...

  9. SQL 语句整理

    1.       /*  SQL CASE 语句写法 * SELECT TABLE1.USER_ID, TABLE1.COMP_CODE, TABLE1.DEPT_CODE, TABLE1.USER_ ...

  10. 【iOS开展-50】使用它来创建一个新的类的实现代码包,因此,不自觉地练习简单MVC实验,附带动画

    接下来说说代码封装最后一个个案. 最后一种情况看:[iOS开展-48]九宫格案例:自己主动布局.字典转模型运用.id和instancetype差别.xib反复视图运用及与nib关系 (1)代码封装的原 ...