如何使用 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>