css字体渐变加描边

定义css

// 字体 - 渐变加描边
@mixin fontColor($backgroundImage, $textStroke, $filterDropShadow) {
  -webkit-text-stroke: $textStroke; // 描边
  font-weight: 700;
  position: relative;
  text-align: center;
  filter: $filterDropShadow; // 投影
  &::before {
    content: attr(border);
    position: absolute;
    z-index: 2;
    background-image: $backgroundImage; // 渐变
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

使用的地方

<section class="title"  border="我是渐变">

        我是渐变

 </section>

@include fontColor(
        linear-gradient(180deg, #fff 24.16%, rgba(255, 255, 255, 0.62) 100%),
        0.2rem #000000,
        drop-shadow(0px 0.1rem 0.2rem #000000)
      );