CSS如何实现文字渐变填充效果？background-clip妙用

background-clip: text;

background-image

.gradient-text {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 定义渐变色 */
  -webkit-background-clip: text; /* 核心：将背景裁剪到文字形状 */
  background-clip: text; /* 标准属性 */
  color: transparent; /* 让文字本身的颜色透明，露出背景 */
  /* 确保文字有足够的尺寸来展示渐变 */
  font-size: 4em;
  font-weight: bold;
  /* 兼容性考虑，旧版浏览器可能需要 */
  -webkit-text-fill-color: transparent;
}

background-image

background-clip: text;

color: transparent;

background-clip: text

background-clip

border-box

padding-box

content-box

text

-webkit-

-webkit-background-clip: text;

background-clip: text;

-webkit-

background-clip: text;

radial-gradient()

conic-gradient()

/* 径向渐变文字 */
.radial-gradient-text {
  background-image: radial-gradient(circle, #a18cd1, #fbc2eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 图片纹理填充文字 */
.image-texture-text {
  background-image: url('path/to/your/texture.jpg'); /* 替换成你的图片路径 */
  background-size: cover; /* 或者 contain, auto */
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

background-size

background-position

background-clip: text

-webkit-

color