文字渐变css

作者：我在坚强也需要有人疼发布日期:2026-02-12 浏览:78

/* 文字渐变 CSS 示例代码 */

h1 {
  /* 使用 background-clip 和 -webkit-background-clip 实现文字渐变效果 */
  background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 解释说明：
1. `background: linear-gradient(...)`：定义了一个线性渐变背景，颜色从左到右依次为 #ff9a9e、#fad0c4、#fad0c4 和 #ff9a9e。
2. `-webkit-background-clip: text` 和 `background-clip: text`：将背景裁剪为文本的形状，使得只有文本部分显示渐变背景。
3. `color: transparent`：将文本颜色设置为透明，确保只显示渐变背景。
*/

上一篇：css rotate3d

下一篇：css文字超出省略号