CSS实现字体
颜色渐变主要用到`
background-image`、`-webkit-
background-clip`和`-webkit-text-fill-color`属性。下面是几种不同示例及代码：
### 示例一：线性
渐变背景，方向向下
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<title>字体
渐变</title>
<style>
.title {
text-align
: center;
font-size
: 8
0px;
background-image
: linear-gradient(to bottom, #FDD819, #E8
05
05); /* 线性
渐变背景，方向向下 */
background-clip
: text;
-webkit-
background-clip
: text; /* 背景被裁剪成
文字的前景色 */
-webkit-text-fill-color
: transparent; /*
文字填充
颜色变透明 */
}
</style>
</head>
<body>
<p class="title">字体
渐变</p>
</body>
</html>
```
此示例中，通过`linear-gradient(to bottom, #FDD819, #E8
05
05)`设置了从`#FDD819`到`#E8
05
05`向下的线性
渐变背景，将背景裁剪为
文字前景色，并使
文字填充
颜色透明，从而实现字体
颜色渐变效果 [^1]。
### 示例二：多
颜色线性
渐变
```html
<p class="linecolor">
文字颜色渐变</p>
<style type="text/
css">
.linecolor{
font-size
: 30px;
background-image
:-webkit-linear-gradient(bottom,red,#fd84
03,yellow);
-webkit-
background-clip
:text;
-webkit-text-fill-color
:transparent;
}
</style>
```
这里使用`-webkit-linear-gradient(bottom,red,#fd84
03,yellow)`创建了从下到上包含红、`#fd84
03`、黄三种
颜色的线性
渐变背景，同样通过裁剪背景和使
文字填充
颜色透明来实现
渐变效果 [^2]。
### 示例三：水平方向线性
渐变
```
css
.gradient-color {
background-image
: linear-gradient(to right, green, white);
background-clip
: text;
-webkit-
background-clip
: text;
-webkit-text-fill-color
: transparent;
}
```
该示例使用`linear-gradient(to right, green, white)`设置了从左到右从绿色到白色的线性
渐变背景，以实现字体
颜色渐变 [^
3]。
### 示例四：包含多个
颜色的向下线性
渐变并结合阴影效果
```html
<div class="top">
<div class="top-text" text="总经理驾驶舱">总经理驾驶舱</div>
</div>
<style lang="s
css" scoped>
.top{
width
: 1
00%;
text-align
: center;
height
: 8
0px;
line-height
: 8
0px;
font-size
:4
0px;
font-weight
: bold;
color
: white;
font-family
: &#
39;microsoftyahei&#
39;;
}
.top-text{
background: linear-gradient(to bottom, #6fb
0ff, #e
3eeff, #ffff, #ffff);
-webkit-
background-clip
: text;
color
: transparent;
}
</style>
```
此示例使用`linear-gradient(to bottom, #6fb
0ff, #e
3eeff, #ffff, #ffff)`设置了包含多个
颜色的向下线性
渐变背景，实现字体
颜色渐变，同时在`top`类上设置了一些样式，可能会结合出阴影等其他视觉效果 [^4]。
博客介绍了在CSS上设置文字的方法，只需将几行代码放在要设置文字的CSS上即可。
扫一扫
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
