CSS3模拟实现iphone返回按钮效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3模拟实现iphone返回按钮效果相关的知识，希望对你有一定的参考价值。
CSS3模拟实现iphone返回按钮效果:
大家知道现在CSS3可以实现各种漂亮的效果，以前只有图片可以实现的效果，现在CSS3实现起来难度也不是太高。
下面分享一段使用CSS3实现的iphone返回按钮的效果，其实这种CSS3代码根本就不用分析，只要给出代码实例，自己就完全可以看明白，当然你要首先知道各个属性的作用是什么，代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> </head> <style> body { margin:0; } header{ background:-moz-linear-gradient(top, #65bbce, #50b1c8); background:-webkit-linear-gradient(top, #65bbce, #50b1c8); background:-ms-linear-gradient(top, #65bbce, #50b1c8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#65bbce‘, endColorstr=‘#50b1c8‘, GradientType=‘0‘); border-bottom:1px solid #348da7; height:50px; verflow:hidden; } .btn-back{ font:14px/27px Arial,Helvetica,sans-serif; color:#fff; text-decoration:none; position:relative; display:block; float:left; margin:11px 0 0 10px; } .btn-back span{ display:inline-block; font-size:13px; line-height:27px; height:27px; padding:0 10px 0 5px; background:-moz-linear-gradient(top, #5bbfd8, #449fb6); background:-webkit-linear-gradient(top, #5bbfd8, #449fb6); background:-ms-linear-gradient(top, #5bbfd8, #449fb6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#5bbfd8‘, endColorstr=‘#449fb6‘, GradientType=‘0‘); border:1px solid #2c96b2; border-left:0; border-radius:2px 5px 5px 2px; text-shadow:0 -1px 0 rgba(0, 0, 0, .4); margin-left:12px; position:relative; z-index:2; box-shadow:0 1px 0 rgba(255, 255, 255, .3) inset, 1px 1px 1px rgba(255, 255, 255, .2); } .btn-back:before { content:‘‘; display:inline-block; width:20px; height:20px; background:-moz-linear-gradient(-45deg, #5bbfd8, #449fb6);/*背景旋转-45°*/ background:-webkit-linear-gradient(-45deg, #5bbfd8, #449fb6); background:-ms-linear-gradient(-45deg, #5bbfd8, #449fb6); border:1px solid #2c96b2; -webkit-transform-origin: 0 0;/*设置基点为0,0*/ -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform: scaleX(0.8) rotate(45deg);/*X轴烟锁，旋转45°*/ -moz-transform: scaleX(0.8) rotate(45deg); -ms-transform: scaleX(0.8) rotate(45deg); border-radius: 3px 2px; position: absolute; left:13px; top:-1px; } </style> <body> <header> <a class="btn-back" href="#"> <span>首页</span> </a> </header> </body> </html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=17471
更多内容可以参阅:http://www.softwhy.com/divcss/
以上是关于CSS3模拟实现iphone返回按钮效果的主要内容，如果未能解决你的问题，请参考以下文章