How do use the css implementation text stroke

Question

First of all, thank you for clicking to view this issue. Actually, I want to achieve different styles of text by using a rich text editor, but I found that there is no rich text editor that can set text stroke, so I want to write a plugin about text stroke. However, I don't know how to use CSS to set text stroke to achieve this effect.

https://i.stack.imgur.com/tlxnV.png

For example:

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