vue 渐变色文字

亦凉 2023-03-01 12:42 1阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlbW9fTnVsbA_size_16_color_FFFFFF_t_70]

## 1.1 CSS 样式示例 ##

/* 将背景设为渐变 */
    background-image: -webkit-linear-gradient(top, white, #a4a4a4, #6a6b6b);
    /* 规定背景绘制区域 */
    -webkit-background-clip: text;
    /* 将文字隐藏 */
    -webkit-text-fill-color: transparent;

![format_png][]

## 1.2 属性详解 ##

### 1.2.1 linear-gradient ###

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

**☞ 浏览器支持**  
![format_png 1][]

**☞ 语法**

/* direction: 方向；color-stop: 颜色 */
    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

**☞ 示例**

/* 从左侧开始的线性渐变，从红色开始，转为黄色 */
    background-image: linear-gradient(to right, red , yellow);
    
    /* 从左上角到右下角的线性渐变 */
    background-image: linear-gradient(to bottom right, red , yellow);

### 1.2.2 background-clip ###

background-clip 属性指定背景绘制区域

**☞ 浏览器支持**  
![format_png 2][]

**☞ 语法**

/* border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。 padding-box 背景绘制在衬距方框内（剪切成衬距方框）。 content-box 背景绘制在内容方框内（剪切成内容方框）。 text 以文字为绘制背景（剪裁成文字） */
    background-clip: border-box|padding-box|content-box;

### 1.2.3 text-fill-color ###

text-fill-color 文本填充颜色，CSS 3新属性。

**☞ 浏览器支持**  
只适用于webkit内核

**☞ 注意**  
text-fill-color 一般设置为 transparent（透明），然后使用 background-image 渐变颜色来设置文字的背景色，使用 background-clip 来截取文字

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlbW9fTnVsbA_size_16_color_FFFFFF_t_70]: /images/20230208/0eeb4b1415f34ffb8b686daa3536c908.png
[format_png]: /images/20230208/7deccdf703d24f58b1142bb1e51984c8.png
[format_png 1]: /images/20230208/b59d28de9f6742ddbedfd5b4b351eada.png
[format_png 2]: /images/20230208/203e1b7249ed430c98cc54e422ed0878.png