CSS实现彩虹文字效果

本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹文字的效果（附代码），有需要的朋友可以参考一下，希望对你有所帮助。

    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>

CSS：

width: 500px;        
font-size: 20px;        
font-weight: bold;        
-webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;

就是这么简单。

何为 -webkit-background-clip:text

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

当然你想把渐变换成背景图也是可以的

p {        
width: 500px;        
font-size: 100px;        
font-weight: bold;        
-webkit-text-fill-color: transparent;        
background:url(https://source.unsplash.com/random) no-repeat;        
-webkit-background-clip: text;    
}

第一次分享，感谢大家支持。