<style>
.color{
background-image: -webkit-gradient(linear, left center, right center, from(rgba(0, 0, 0, 1)), to(rgba(255, 0, 0, 1))); //渐变
-webkit-background-clip: text; //规定背景的绘制区域
-webkit-text-fill-color: transparent; //规定文字的填充色
}
</style>
<div class="color">花里胡哨</div>
经过测试在除IE外的主流浏览器都有效。