V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
overdev
V2EX  ›  CSS

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

  •  
  •   overdev · 2023-10-07 11:38:31 +08:00 · 1214 次点击
    这是一个创建于 411 天前的主题,其中的信息可能已经有所发展或是发生改变。

    实际上我要通过使用富文本编辑器来实现不同风格的文本,但是我发现并没有一个富文本编辑器可以设置文本描边,于是我想编写一个关于文字描边的插件.但是我不知道如何通过 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>
    
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3388 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 10:55 · PVG 18:55 · LAX 02:55 · JFK 05:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.