css实现文字根据条件渐变
body 选择器
body {
padding: 50vh 0;
text-align: center;
font-size: 6em;
}padding: 50vh 0; 设置了body的上下内边距为视口高度的50%，左右内边距为0。text-align: center; 使得body内的文本内容居中显示。font-size: 6em; 设置了字体大小为当前字体尺寸的6倍（通常，在根元素（<html>）上未设置字体大小时，这相当于浏览器默认字体大小的6倍）。
h1 选择器
h1 {
background: linear-gradient(#fe4e00 58%, lightblue 50%)
100vh fixed;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-stroke: 2px #060afe;
}-
background: linear-gradient(#fe4e00 58%, lightblue 50%) center center / 100vw 100vh fixed;- 这行代码现在正确地设置了线性渐变，其颜色从
#fe4e00到lightblue，在58%和50%的位置发生变化（但请注意，由于渐变是线性的，并且方向默认从上到下，所以这两个颜色点可能不会按预期显示，因为58%和50%非常接近）。 center center是背景位置，表示渐变中心对齐。/ 100vw 100vh是背景大小，但这里的使用可能是不恰当的，因为当使用background-clip: text;时，渐变的大小和位置通常不需要设置为整个视口大小。然而，如果这是您的特定需求（例如，您想要渐变在文本周围有一个特定的视口大小的“框”），则保留它。但请注意，这可能会导致渐变超出h1文本的范围。fixed是背景附件，表示背景图像不会随页面滚动而滚动。
- 这行代码现在正确地设置了线性渐变，其颜色从
-
background-clip: text;和-webkit-background-clip: text;允许渐变仅显示在文本上。 -
color: transparent;使文本颜色透明，从而允许渐变显示在文本上。 -
-webkit-text-stroke: 2px #060afe;为文本添加了一个2像素宽的蓝色描边。
实现效果如下
