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;
    }

   
 数据采集 

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

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

haorooms 测试 

.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 外描边 + 阴影 + 文字渐变

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