隨著瀏覽器的快速更新迭代扣囊，支持的DOM尚洽、BOM悔橄、CSS新特性越來越多，功能也越來越健全。本文就簡單介紹一下使用CSS3的linear-gradient癣疟、background-clip和box-decoration-break屬性來實現(xiàn)漸變色文字尺铣。
CSS3 漸變色文字
一、屬性說明
主要用到CSS3的新特性：
-
linear-gradient：該函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片争舞。 -
background-clip：該屬性規(guī)定背景的繪制區(qū)域凛忿。 -
box-decoration-break：該屬性規(guī)定當(dāng)元素框被分段時，如何應(yīng)用元素的background竞川、padding店溢、border、border-image委乌、box-shadow床牧、margin以及clip-path。
linear-gradient線性漸變平時使用的比較多遭贸，這里就不再詳細(xì)說明了戈咳。主要來看看background-clip和box-decoration-break的屬性值以及相應(yīng)的作用。
1-1.background-clip
| 值 | 描述 |
|---|---|
| border-box | 默認(rèn)值壕吹。背景繪制在邊框方框內(nèi)（剪切成邊框方框）著蛙。 |
| padding-box | 背景繪制在襯距方框內(nèi)（剪切成襯距方框）。 |
| content-box | 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）耳贬。 |
| text | 以文字的范圍來裁剪背景圖片 |
1-2.box-decoration-break
| 值 | 描述 |
|---|---|
| slice | 默認(rèn)踏堡。框裝飾作為整體應(yīng)用于元素咒劲，并在元素片段的邊緣斷裂顷蟆。 |
| clone | 框裝飾適用于元素的每個片段，就像片段是單個元素一樣腐魂。邊框包裹元素的每個片段的四個邊緣帐偎，并且完整地重繪每個片段的背景。 |
| initial | 將此屬性設(shè)置為其默認(rèn)值蛔屹。 |
| inherit | 從其父元素繼承此屬性削樊。 |
二、具體實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3實現(xiàn)漸變文字 | 天問</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
歡迎訪問：天問博客
