如何使用 css 来设置文字描边亿以达到 canvas 中设置文字外描边的效果？

实际上我要通过使用富文本编辑器来实现不同风格的文本，但是我发现并没有一个富文本编辑器可以设置文本描边，于是我想编写一个关于文字描边的插件.但是我不知道如何通过 css 来设置文本描边来得到这样的效果

<script setup lang="ts">
import { onMounted } from 'vue'
import Konva from 'konva';
const konvaInit = () => {
  const stage = new Konva.Stage({
    container: 'target',
    width: 400,
    height: 400
  })
  var layer = new Konva.Layer();

      var simpleText = new Konva.Text({
        x: 0,
        y: stage.width() / 2,
        text: 'Simple Text',
        fontSize: 50,
        fontFamily: 'Calibri',
        fill: 'green',
        stroke: 'white',
        strokeWidth: 10,
        lineJoin: 'round',
        fillAfterStrokeEnabled: true
      });
      layer.add(simpleText);

      stage.add(layer);
}

onMounted(konvaInit)
</script>

<template>
  <div class="test">
    test text
  </div>
  <div class="test2">
    test text
  </div>
  <div id="target" class="text3"></div>
</template>

<style scoped>
.test {
  font-size: 80px;
  color: black;
  text-shadow: -10px -10px 10px blue,
    10px -10px 10px blue,
    -10px 10px 10px blue,
    10px 10px 10px blue;
}

.test2 {
  font-size: 80px;
  color: black;
  -webkit-text-stroke: 10px blue;
}

.text3 {
  width: 400px;
  height: 400px;
  background-color: black;
}
</style>