UI效果

渐变效果

直接添加text-shadow属性，发现阴影覆盖在了字体之上

解决：

利用::after伪类，将字体的阴影加在伪类之上。

<template>
  <div class="app">
    <h1 ref="h1Ref">{{ title }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const title = ref('这是一个标题');
    const h1Ref = ref<HTMLElement | null>(null);

    return {
      title,
      h1Ref,
    };
  },
});
</script>

<style lang="scss">
.app {
  // 这里无法直接获取 h1 的内容，但可以通过在 mounted 生命周期钩子中设置 CSS 变量来间接传递
}
</style>

 script

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const title = ref('这是一个标题');
    const h1Ref = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (h1Ref.value) {
        document.documentElement.style.setProperty('--h1-content', `"${title.value}"`);
      }
    });

    return {
      title,
      h1Ref,
    };
  },
});
</script>

css 

 h1 {
          position:relative;
          margin-top: 22px;
          font-size: 48px;
          font-weight: bold;
          text-shadow: 1px 2px 3px rgba(7, 21, 67, 0.8);
          color:#fff;
        }
        h1::after {
          position: absolute;
          left: 0px;
          content: var(--h1-content);
          color:#59c8ff; 
          -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(rgb(255, 255, 255, 1)));
        }