用CSS3写的模仿iPhone中的返回按钮

2020-05-09 07:27:37易采站长站整理

    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的浏览器访问才可以看到效果)