cross-browser - 渐变背景不适用于 Chrome

Question

您好，我正在使用以下代码，它适用于 Firefox，但不适用于 Chrome。

background: -moz-linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;

我也用过 WebKit，但还是不行。

Answer 1

每个浏览器都有不同的渐变背景语法。此代码应涵盖使用最广泛的浏览器:

#gradient {
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, right bottom, from(#CAF579), to(#73CA08));
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(left top, #CAF579, #73CA08);
    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF)";
}

您可以在此处查看更多信息:http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/