给文字应用渐变颜色

原创于 2024-12-09 10:50:32 发布 · 319 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #前端

收录于

如果你想要给文字应用渐变颜色，可以使用CSS中的background-clip和text-fill-color属性（在Webkit浏览器中）或者-webkit-text-fill-color属性。以下是一个示例，展示如何给文字应用渐变颜色：

.gradient-text {
  /* 定义文字的线性渐变背景 */
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%);
  
  /* 背景裁剪到文字 */
  background-clip: text;
  
  /* 使文字透明，显示背景 */
  color: transparent;
  
  /* Webkit浏览器专用的属性 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 其他样式（可选） */
  font-size: 24px;
  font-weight: bold;
}