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;
}
/*左边的小三角*/
.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);
border: 1px solid #2c96b2;
-webkit-transform-origin: 0 0;/*设置基点为0,0*/
-moz-transform-origin: 0 0;
-webkit-transform: scaleX(0.8) rotate(45deg);/*X轴压缩,旋转45°*/
-moz-transform: scaleX(0.8) rotate(45deg);
border-radius: 3px 2px;
position: absolute;
left: 13px;
top: -1px;
}
5、最后给出一个成品
这个只能说实现一个不完美的返回按钮,因为有些阴影效果比较难搞定。但是我觉得是一个不错的替代方案,总比几K的图片靠谱(体积变小,没有额外的请求)
演示地址:http://demo.jb51.net/js/2015/ios_back_button.htm (提示用支持html5+css3的浏览器访问才可以看到效果)










