CSS和SVG实现文字渐变、描边、投影

原文章链接：
https://juejin.cn/post/7010944239609577508

文字渐变+描边

    .form-title{
        background-image: linear-gradient(#FFCF02, #FF7352);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; /*需要文字透明*/
        -webkit-text-stroke: 2px #fff; /*描边*/
    }
    .form-title::before{
        content: attr(data-title);
        position: absolute;
        background-image: linear-gradient(#FFCF02, #FF7352);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0;
    }

    <div class="h3 text-center margin-bottom-sm form-title" data-title="浪漫惊喜信息确认">浪漫惊喜信息确认</div>

CSS 文字描边

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px #333;
}

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

SVG 文字渐变

.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
  <text class="text">为你定制 发现精彩</text>
</svg>

SVG 文字描边

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

圆角描边

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
  stroke-linejoin: round; /*路径转角为圆角*/
}

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1211.html

转载时须注明出处及本声明