不同的浏览器所用的标签有所不同,特别需要注意的是Firefox似乎和其它浏览器是反着来的,下面给出一个兼容各大主流浏览器(IE 6,7除外)的例子,运行效果见本站顶端标题栏:

     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;

    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;

    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;

    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #6D84A2), color-stop(0.5, #8094AE), color-stop(0.51, #889BB3), color-stop(1, #B0BCCD) );

    background-image: -moz-linear-gradient(bottom, #6D84A2 0%, #8094AE 50%, #889BB3 51%, #B0BCCD 100%);

    background-image: -ms-linear-gradient(top bottom, #6D84A2 0%, #8094AE 50%, #889BB3 51%, #B0BCCD 100%); /* IE10 */;

    background-image: -o-linear-gradient(bottom, #6D84A2 0%, #8094AE 50%, #889BB3 51%, #B0BCCD 100%); /* Opera 11.10+ */;

    background-image: linear-gradient(top, #6D84A2 0%, #8094AE 50%, #889BB3 51%, #B0BCCD 100%);

转载请注明:WebLogic Android 博客 » 使用纯CSS实现仿iOS标题渐变效果