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. EasyUI datagrid border处理,加边框,去边框,都能够

    以下是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...

  4. EasyUI datagrid border处理,加边框,去边框,都可以,easyuidatagrid

    下面是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...

  5. border——边框属性

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

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

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

  7. CSS .css边框属性(border)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. border 边框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

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

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

随机推荐

  1. POJ 1979 Red and Black

    #include<iostream> #include<cstdio> #include<queue> #include<algorithm> #inc ...

  2. Spring_跨项目读取properties文件

    应用背景:工程中有40~50个项目,分为4个模块,分别是核心模块.服务接口模块.服务实现模块.Web模块.其它模块(包括消息队列.quartz任务等).工程中很多配置项都是多个项目共有调用的,所以单独 ...

  3. PRINCE2随笔

    首先要说的是,我这篇体会是针对一定的背景的,不能算是一种通用的管理方式,只能是我自己的经验总结,能给大家平常的管理提供一点思路,我就很满足了. 先说说背景,我所在公司做的是大型桌面应用软件,简单点说就 ...

  4. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  5. C#面向对象设计模式纵横谈——5.Factory Method 工厂方法模式(创建型模式)

    动机 (Motivation) 在软件系统中,经常面临着“某个对象”的创建工作; 由于需求的变化,这个对象经常面临着剧烈的变化,但是它却拥有比较稳定的接口. 如何应对这种变化?如何提供一种“封装机制” ...

  6. CodeForces 24D Broken Robot

    题意:n*m的棋盘,一个机器人在(i,j)处,每次等概率地停在原地,向左移动一格,向右移动一格,向下移动一格(不能移出棋盘).求走到最后一行所需期望步数.n<=1000,m<=1000 一 ...

  7. (转载)哈夫曼编码(Huffman)

    转载自:click here 1.哈夫曼编码的起源: 哈夫曼编码是 1952 年由 David A. Huffman 提出的一种无损数据压缩的编码算法.哈夫曼编码先统计出每种字母在字符串里出现的频率, ...

  8. LINQ函数

    LINQ函数虽然和LINQ语句实现了同样的功能,但LINQ函数使用起来更加快捷.学过数据库的感觉LINQ语句都不难,但语句比较长. 会LINQ函数,才算会LINQ. 1.Where(),结果过滤 Li ...

  9. js 对象的_proto_

    js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...

  10. CATransition的type属性类型

    用字符串表示 pageCurl            向上翻一页      pageUnCurl          向下翻一页      rippleEffect        滴水效果      s ...