css实现文字渐变
在前端开发中，给文字设置渐变色是完全可以实现的，常用的方式是结合 CSS 的 background、-webkit-background-clip 和 -webkit-text-fill-color 属性。下面是一个常见的实现方法：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文字渐变色示例</title><style>.gradient-text {font-size: 48px;font-weight: bold;background: linear-gradient(90deg, #ff7e5f, #feb47b);/* 背景裁剪到文字 */-webkit-background-clip: text;/* 文字填充色设置为透明，显示背景 */-webkit-text-fill-color: transparent;/* 兼容 Firefox */background-clip: text;color: transparent;}</style>
</head>
<body>// 注意div可能存在问题，因为div是块状元素，占据整行，在文字部分可能还没有体现出渐变来呢<span class="gradient-text">渐变色文字效果</span>
</body>
</html>
说明：
background: linear-gradient(...)设置渐变背景。-webkit-background-clip: text让背景只显示在文字上（Safari/Chrome）。-webkit-text-fill-color: transparent让文字本身变透明，只显示背景色。background-clip: text和color: transparent用于兼容部分浏览器（如 Firefox）。
注意事项：
- 这种方式在大部分现代浏览器（Chrome、Safari、Edge、Firefox）都能生效，但在部分老旧浏览器（如 IE）可能不支持。
- 你可以自由调整渐变的颜色、方向等参数。