css同时实现文字颜色渐变阴影和外描边

前言

之前写过一篇文章css实现模糊镜效果及渐变字体和text-shadow冲突解决方案，介绍了文字渐变和阴影冲突的解决方案，但是假如文字渐变和阴影又遇到外描边怎么办呢？ 我们知道外描边一般使用阴影来实现的，假如用阴影实现，那么和阴影就有冲突了，只能用别的方式来实现外描边。

css外描边

text-stroke描边是居中描边，不是外描边，要实现外描边一般又两种解决方案：

一：通过阴影实现

  text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

二、通过伪元素before或者after来实现，包一层,或者before、after的text-stroke: 0;，外层设置描边的2倍，都可以，下面举例一种。

例如：

 h2 {
        font-size: 31px;
        font-weight: 800;
        color: #70b4d9;
        position: relative;
        z-index: 1;
    }
    h2::before {
        content: attr(data-text);
        position: absolute;
        -webkit-text-stroke: 6px #fff;
        z-index: -1;
    }

   <h2 data-text="数据采集">数据采集</h2>

css外描边+阴影+文字渐变

之前了解到，阴影+文字渐变是又冲突的，要通过伪元素来实现，描边用阴影实现的化和阴影又有冲突，因此也要用伪元素来实现。假如一个div里同时用after和before两个伪元素实现的化，还是有问题的，最终采用如下方案来实现css外描边+阴影+文字渐变。

<div class="haorooms_shoke_gd_sd " data-text="haorooms测试" >haorooms测试</div>

.haorooms_shoke_gd_sd {
   background-color: transparent;
  --gradient-color: linear-gradient(to right,rgb(254, 220, 70),rgb(251, 112, 153));
  -webkit-text-stroke: 2px rgb(248, 231, 28);// 描边写实际描边的2倍
  text-shadow: rgb(187, 201, 220) 2px 2px 2px;
 position: relative;
  &::after {
    z-index: 10;
    background-image: var(--gradient-color);
    -webkit-background-clip: text;
    color: transparent;
    // 去除继承父级样式
    text-shadow: none;
    content: attr(data-text);
    position: absolute;
    /* 实现元素外描边的关键 */
    -webkit-text-stroke: 0;
  }
}

这样就实现了css外描边+阴影+文字渐变

你有什么好的实现方式吗？可以留言告诉我。