文字渐变需要了解以下属性：
background-image：背景色
background-clip：此属性规定背景的绘制区域，有四个值：
border-box，背景被裁剪到边框盒。padding-box，背景被裁剪到内边距框。content-box，背景被裁剪到内容。text，表示只显示文字区域。
-webkit-text-fill-color：文字填充色，实现文字渐变色要展示的是背景的渐变颜色，所以这里我们需要设置为transparent( 寻常的- webki t-表示的是Chrome和Safari的私有属'性，但是它却声明了所有的，除了IE浏览器))
-webkit-text-stroke:1px black;实现镂空文字（文字边框）
详细可参考：[CSS] 🌈在字间流淌 | 第十二期_哔哩哔哩_bilibili
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0;margin: 0;}body {display: flex;height: 100vh;align-items: center;justify-content: center;}p {font-size: 4vh;font-weight: 600;background-clip: text;-webkit-background-clip: text;/*这次的这句和以往不一样*//* 以往是 考虑低版本浏览器*//*这次就连最新版Chrome和Safari都得 *//*注意是background-clip: text;需要 *//*如果是: content啊之 类的就没这么苛刻的*/-webkit-text-fill-color: transparent;/*这个属性的- webkit前缀也比较特殊 *//*寻常的- webki t-表示的是Chrome和Safari的私有属'性*//*但是它却声明了所有的(除了IE浏览器)*/background-image:linear-gradient(90deg,rgb(255, 167, 69),rgb(254, 134, 159),rgb(239, 122, 200),rgb(160, 131, 237),rgb(67, 174, 255),rgb(160, 131, 237),rgb(239, 122, 200),rgb(254, 134, 159),rgb(255, 167, 69));background-size: 200%;}p:hover {animation: streamer 2s linear infinite;}@keyframes streamer {0% {background-position: 0%;}100% {background-position: 200%;}}</style></head><body><p>何以与君识，无言泪千行</p></body></html>
