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


字数:580 阅读时长:2分钟 阅读:85

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

CSS3 渐变色文字

一、属性说明

主要用到CSS3的新特性:

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

linear-gradient线性渐变平时使用的比较多,这里就不再详细说明了。主要来看看background-clipbox-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
最后更新: 2021-12-01
本文标题: CSS3学习与总结 · 实现渐变色文字
本文链接: https://www.tiven.cn/p/78a164b7/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^