开发者笔记

CSS3学习与总结 · 实现渐变色文字

字数：593 阅读时长：2分钟 阅读：85

随着浏览器的快速更新迭代，支持的DOM、BOM、CSS新特性越来越多，功能也越来越健全。本文就简单介绍一下使用CSS3的linear-gradient、background-clip和box-decoration-break属性来实现渐变色文字。

CSS3 渐变色文字

一、属性说明

主要用到CSS3的新特性：

  • linear-gradient：该函数用于创建一个表示两种或多种颜色线性渐变的图片。
  • background-clip：该属性规定背景的绘制区域。
  • box-decoration-break：该属性规定当元素框被分段时，如何应用元素的 background、padding、border、border-image、box-shadow、margin 以及 clip-path。

linear-gradient线性渐变平时使用的比较多，这里就不再详细说明了。主要来看看background-clip和box-decoration-break的属性值以及相应的作用。

1-1.background-clip

值描述
border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box背景绘制在衬距方框内（剪切成衬距方框）。
content-box背景绘制在内容方框内（剪切成内容方框）。
text以文字的范围来裁剪背景图片

1-2.box-decoration-break

值描述
slice默认。框装饰作为整体应用于元素，并在元素片段的边缘断裂。
clone框装饰适用于元素的每个片段，就像片段是单个元素一样。边框包裹元素的每个片段的四个边缘，并且完整地重绘每个片段的背景。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

二、具体实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3实现渐变文字 | 天问</title>
  <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        background-color: #002240;
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img {
        width: 80px;
        border-radius: 40px;
    }
    .text {
        margin-left: 20px!important;
        font-size: 1.5em;
        background-image: linear-gradient(135deg, #2DD7A6, #FADBD8, #FB5430);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        -moz-box-decoration-break: clone;
        color: transparent;
        word-break: keep-all;
    }
  </style>
</head>
<body>

<div class="box">
  <img class="img" src="https://tiven.cn/assets/img/icon-128.png">
  <h1 class="text">天问的个人博客</h1>
</div>

</body>
</html>

demo演示地址：https://tiven.cn/demo/gradient-text.html

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2021-11-30
最后更新： 2023-03-02
本文标题： CSS3学习与总结 · 实现渐变色文字
本文链接： https://www.tiven.cn/p/78a164b7/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
欢迎留言，提问 ^_^