效果:

Rianbow Text, CSS 实现彩虹字效果

Code:

<style>
	p.rainbow-text{
		background: linear-gradient(to right, red, orange,yellow,green,cyan,blue,purple);
		/* 彩虹的颜色 */
		
		-webkit-background-clip: text;
		/* 指定背景绘制区域,目前只有 webkit 浏览器支持 text */
		/* 其他浏览器没有测试过 */
		
		-webkit-text-fill-color: transparent;
		color: transparent;
		/* 设置文字透明,在 Chrome 上效果一样,任选一句即可 */
		
		width: 16em;
		/* 根据字数调整数值大小，使彩虹色显示完整 */
	}
</style>