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/
时间： 2024-11-25 08:24:56