Effect Figure 2: 
Effect Figure 3: 
The following detailed description makes:
Today is the protagonist-background-Clip -webkit: text;
/ uses this attribute means that the text block cut out background clipping region, that is the background of the text block, an area other than the text They will be cropped. /
drawing area specified background-clip property background
simple trials: Referring W3School
(https://www.w3school.com.cn/cssref/pr_background-clip.asp)
Common font gradient following main points:
/ background-Clip: border-Box; // background extends to the outer edge of the border (but below the border)
background-Clip: padding-Box; // no background below border, ie bACKGROUND extends into the outer edge margins.
background-clip: content-box; // BACKGROUND crop region to the content (content-box) peripheral edge. /
/ * Background by the CSS linear-gradient () function operates
simple trials: Referring novice tutorial
https://www.runoob.com/cssref/func-linear-gradient.html
specific code as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
margin:0 auto;
/*使div参照页面剧中显示*/
}
div p{
text-align: center;
/*使文字参照div居中显示*/
background: linear-gradient(red, green, blue);
-webkit-background-clip: text;
/*使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，
* 文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。*/
color: transparent;
/*定义文本颜色为透明*/
font-weight: bolder;
/*文本加粗*/
font-size: 30px;
/*文本大小*/
}
</style>
</head>
<body>
<div>
<p>奇潮屋</p>
</div>
</body>
</html>
There are more than draw:
https://www.imooc.com/article/27827;
I do not know if you can add and practicing oh;
individuals also have free university graduates defense sites and total set;
and providing free software and instructional videos;
