文字渐变+外描边
background: linear-gradient(to bottom, #fff, #67dff7);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-text-stroke: 2px #0165bb;
文字渐变并带有阴影
<h1 :data-content="textContent">{{textContent}}<h1>
textContent:"Hello,world"
h1 { width: 100%; height: 110px; font-weight: 600; font-family: PingFang-SC-Bold; font-size: 70px; color: #ffffff; position: relative; text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8); color: #ffddac; }h1:after { position: absolute; left: 130px; content: attr(data-content); color: #fff; -webkit-mask-image: -webkit-gradient( linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)) ); text-shadow: 0px 3px 1px #000;}
