效果图二：
效果图三：
以下使详细介绍：
今天的主角是-webkit-background-clip: text;
/使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。/
background-clip 属性规定背景的绘制区域
简单试炼：参照w3school
（https://www.w3school.com.cn/cssref/pr_background-clip.asp）
常见的字体渐变主要有以下几点：
/background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。/
/*背景由CSS linear-gradient() 函数作用
简单试炼：参照菜鸟教程
https://www.runoob.com/cssref/func-linear-gradient.html
具体代码如下
<!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>
以上有借鉴：
https://www.imooc.com/article/27827；
如有不懂可以加我并练习哦；
个人也有免费大学生毕业网站和答辩项目总集；
并提供免费软件和教学视频；
