css 渐变色字和描边字

文字渐变色

background-image: linear-gradient(to top, red, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

文字描边

文字内外双描边

text-stroke: 2px #2173FF;

文字外描边效果

<p class="stroke" data-content="这里使用了外描边文字效果"> 这里使用了外描边文字效果 </p>

.stroke{
text-stroke: 2px #2173FF;
}
[data-content]::before {
  content: attr(data-content);
  position: absolute;
  -webkit-text-stroke: 0;
  color: #fff;
}