用border-image实现波浪边框
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>
用border-image实现波浪边框的更多相关文章
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- Row Border in DataGrid 表格边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- EasyUI datagrid border处理,加边框,去边框,都能够
以下是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...
- EasyUI datagrid border处理,加边框,去边框,都可以,easyuidatagrid
下面是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...
- border——边框属性
一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...
- 微信小程序 —— button按钮去除border边框
button默认有边框,边框用“border : none”去掉就不可以,边框依然存在, 使用 button::after{ border: none; } 来去除边框,边框就没了 wxml: < ...
- CSS .css边框属性(border)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- border 边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
随机推荐
- POJ 1979 Red and Black
#include<iostream> #include<cstdio> #include<queue> #include<algorithm> #inc ...
- Spring_跨项目读取properties文件
应用背景:工程中有40~50个项目,分为4个模块,分别是核心模块.服务接口模块.服务实现模块.Web模块.其它模块(包括消息队列.quartz任务等).工程中很多配置项都是多个项目共有调用的,所以单独 ...
- PRINCE2随笔
首先要说的是,我这篇体会是针对一定的背景的,不能算是一种通用的管理方式,只能是我自己的经验总结,能给大家平常的管理提供一点思路,我就很满足了. 先说说背景,我所在公司做的是大型桌面应用软件,简单点说就 ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- C#面向对象设计模式纵横谈——5.Factory Method 工厂方法模式(创建型模式)
动机 (Motivation) 在软件系统中,经常面临着“某个对象”的创建工作; 由于需求的变化,这个对象经常面临着剧烈的变化,但是它却拥有比较稳定的接口. 如何应对这种变化?如何提供一种“封装机制” ...
- CodeForces 24D Broken Robot
题意:n*m的棋盘,一个机器人在(i,j)处,每次等概率地停在原地,向左移动一格,向右移动一格,向下移动一格(不能移出棋盘).求走到最后一行所需期望步数.n<=1000,m<=1000 一 ...
- (转载)哈夫曼编码(Huffman)
转载自:click here 1.哈夫曼编码的起源: 哈夫曼编码是 1952 年由 David A. Huffman 提出的一种无损数据压缩的编码算法.哈夫曼编码先统计出每种字母在字符串里出现的频率, ...
- LINQ函数
LINQ函数虽然和LINQ语句实现了同样的功能,但LINQ函数使用起来更加快捷.学过数据库的感觉LINQ语句都不难,但语句比较长. 会LINQ函数,才算会LINQ. 1.Where(),结果过滤 Li ...
- js 对象的_proto_
js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...
- CATransition的type属性类型
用字符串表示 pageCurl 向上翻一页 pageUnCurl 向下翻一页 rippleEffect 滴水效果 s ...