CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

废话不多说,先来效果图

代码

#grad1 {
        display: inline-block;
        font-size: 60px;
        font-family: 'microsoft yahei';
        background: -webkit-linear-gradient(to bottom right, #efba70, white, #efba70);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to bottom right, #efba70, white, #efba70);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to bottom right, #efba70, white, #efba70);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, #efba70, white, #efba70);
        /* 标准的语法(必须放在最后) */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

想知道更多的渐变属性可参考w3c


扫描二维码,在手机上阅读!