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. css写出0.5px边框(一)

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

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

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

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

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

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

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

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

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

  8. 表格table嵌套,边框合并问题

    [问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题.   [解决办法]: 外表格样式: <tabl ...

  9. HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

随机推荐

  1. Eclipse 调试Bug之使用断点的七大技巧

    原文链接:http://xiaohuafyle.iteye.com/blog/1705494 调试竟然有这么多技巧,亏我以前竟不知道...   Eclipse这个开发工具为我们调试bug提供了非常便利 ...

  2. Linux 进程间通讯详解五

    msgrcv函数 ssize_t msgrcv(int msqid, void *msgp, size_t msgsz, long msgtyp,int msgflg); --功能:是从一个消息队列接 ...

  3. MongoDB学习笔记一

    操作系统:Windows7 1.下载MongoDB 2.6.5服务端,并安装 网址:http://pan.baidu.com/s/1dDfoJAh 说明:网上很多都不需要安装的,这个需要安装. 2.添 ...

  4. WebAPI返回数据类型

    最近开始使用WebAPI,上手很容易,然后有些疑惑 1.WebAPI默认返回什么数据类型,json还是xml? 2.怎么修改WebAPI的返回数据类型,我用IE浏览器请求返回的数据都是JSON格式的, ...

  5. Java设计模式1——策略模式(Strategy Pattern)

    最近觅得一本好书<您的设计模式>,读完两章后就能断言,一定是一头极品屌丝写的,而且是专写给开发屌丝男的智慧枕边书,小女子就委屈一下,勉强看看,人笨,谁让他写得这么通俗易懂呢!为了加深理解, ...

  6. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  7. ElasticSearch入门系列(四)分布式初探

    序言:ElasticSearch致力于隐藏分布式系统的复杂性,以下的操作都是在底层自动完成的: 将你的文档分区到不同的容器或者分片(shards),他们可以存在于一个或多个节点中 将分片均匀的分配到各 ...

  8. Spring In Action ②

    初始化和销毁Bean init-method && destory-method <bean id="auditorium" class="test ...

  9. org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts.dispatcher.FilterDispatcher是什么区别?

    org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts.dispatcher.F ...

  10. HNOI2006-鬼谷子的钱袋

    鬼谷子的钱袋 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的拍卖行(聚宝商行)将要举行一场拍卖会,其中有一件宝物引起 ...