CSS样式合集（实现字体描边+颜色填充，字体阴影填充+描边，特殊字体样式实现）

前言

这段时间因需求更新写了太多的字体样式有做过字体渐变色和描边同时用上的需求（如果有别的字体特效实现不懂的也可以私信博主一起学习讨论哟~），再此整理一下，以供大家参考。

1.字体实现渐变色填充+双层阴影填充

需求是给字体添加了双层阴影（一层橘色+一层绿色）和一个渐变金黄色的字体颜色填充。我这里使用伪元素（如果使用蓝湖设计图的话阴影请使用蓝湖代码参考的2倍实现），具体操作如下：

      .text {
        font-family: Arial;
        font-weight: bold;
        position: relative;
        font-size: 5.5rem;
        color: #ffffff;
        text-align: center;
        text-shadow: 0rem 0.2rem 0rem #e0a859, 0rem 0.4rem 0rem #254d3a;//外阴影使用蓝湖显示代码的双倍，内阴影正常
        &::after {
          display: block;
          content: attr(data-content);
          position: absolute;
          width: max-content;
          top: 0;
          transform: translate(-50%);
          left: 50%;
          background-image: -webkit-linear-gradient(#f6db65, #fffbe6, #f9eba9);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: none;
        }
       }

以上代码一起用可以实现字体渐变色，注意：text-shadow和渐变色属性不能一起使用，会有Bug（渐变色背景会影响到阴影效果）之前本人试验过，这里就不演示bug了。

最终实现效果如下：

2.字体普通颜色填充+字体描边

需求是给字体添加了黑色描边和白色的字体颜色填充并且倾斜。这里text-stroke我也同样是使用蓝湖显示的参考代码的双倍实现（外描边使用蓝湖显示代码的双倍，内描边正常），具体操作如下：

.text {
        font-family: Tahoma;
        font-weight: bold;
        font-size: 1.1rem;
        color: #ffffff;
        line-height: 1.4rem;
        text-stroke: 0.4rem #000000;
        -webkit-text-stroke: 0.4rem #000000;
        font-style: italic;
        position: relative;
        text-align: center;
        &::after {
          position: absolute;
          content: attr(data-content);
          width: max-content;
          top: 0;
          left: 50%;
          transform: translate(-50%);
          text-stroke: 0;
          -webkit-text-stroke: 0;
        }
      }

最终实现效果如下：

3.字体标题实现渐变色下划线+标题倾斜效果

需求是给字体添加了一个渐变色下划线和一个倾斜效果的数字序号。我这里同时使用before和after伪元素来实现，具体操作如下：

 .stitle {
        font-family: Inter;
        font-weight: 900;
        font-size: 40px;
        color: #000000;
        line-height: 40px;
        text-align: left;
        box-sizing: border-box;
        position: relative;
        margin: 0 auto;
        padding-left: 55px; 
        }
    
    .stitle::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -15px;
        z-index: -1;
        background: linear-gradient(to right, #259DDD 0%, #FFFFFF 100%);
        width: 623px;
        height: 24px; 
        }
    
    .stitle::after {
        content: '1';
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        font-weight: bold;
        font-family: Inter;
        font-size: 78px;
        font-style: italic;
        color: #299FDD;
        line-height: 40px; 
        }

最终实现效果如下：

**
以上代码仅供各位宝子们参考根据自己实际情况做修改，尽情复制哟~如果有转帖请提前告知哟。博主要下班了，大家拜拜不更了哈哈哈哈哈哈哈哈哈

结束语

如果你还有更好的方式，欢迎私信或者评论大家一起讨论。觉得可以的话可以给博主一个点赞鼓励哟，谢谢大家~