点击刷新
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;
}
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>
<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>
© 著作权归作者所有
举报
发表评论
0/200
