<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.font {
display: inline-block;
font-weight: 700;color: transparent;
-webkit-background-clip: text!important;
font-size: 20px;
}
div:nth-child(1) {
background: linear-gradient(to right, #FF2A2A, #F139D2);
}
div:nth-child(2) {
background: linear-gradient(90deg, #FE8537, #F02B2B);
}
div:nth-child(3) {
background: linear-gradient(90deg, #FF2A00,#FF00AF);
}
div:nth-child(4) {
background: linear-gradient(90deg, #2AD396,#85BB1F);
}
</style>
</head>
<body>
<div class="font">我很好看哟</div>
<div class="font">我很好看哟</div>
<div class="font">我很好看哟</div>
<div class="font">我很好看哟</div>
</body>
</html>
效果：
20200713185227149.png
注意：
1.要在-webkit-background-clip: text的后面加
!important;我目前没找到原因，要是没加样式就会失败；
2.千万千万是行内标签或是行内块标签，若是块级标签则会添加不上渐变的效果，亲测的🤣不知道什么原因，反正就会导致失败咯！！！
网友评论