Html 带填充的CSS文本边框

我在这里读过关于文本边框的内容：

在那篇文章中，他们使用字体阴影来制作边框，但我无法去除阴影颜色，我只需要边框，因为我需要在文本和边框之间的空间后面显示一幅图片，并在文本和边框之间创建一些空间

这就是我努力实现的目标：

这是我到目前为止所做的（这是不正确的，因为边框与文本相连）：

h1{
颜色：黄色；
文本阴影：-1px 0黑色，0 1px黑色，1px 0黑色，0-1px黑色；
}
你好，世界

我们只需要以正确的方式操作css

我已经准备好了一份午餐

不客气

#文本{
字体大小：30px；
字号：100；
字体系列：arial；
颜色：黑色；
位置：绝对位置；
左：4px；
顶部：7px；
}
#边界{
字体大小：40px；
字号：900；
字体系列：arial；
颜色：白色；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：黑色；
}

---

MM

你所要求的是不可能的。特别是制定透明的外部边界的要求。虽然

box shadow

有一个inset属性，但

text shadow

没有。背景剪辑可以与

文本阴影

一起创建一些有趣的效果，但与您正在寻找的效果完全不同

span{font size:300px；
字体大小：粗体；
字体系列：Arial，'无衬线'；
背景色：#ed5c65；
颜色：透明；
文本阴影：4px4p4pRGBA（255255255,0.3）；
-webkit背景剪辑：文本；
-moz背景剪辑：文本；
背景剪辑：文本；
}

M

检查这个

h1{
字号：80px；
/*仅限WebKit（Safari/Chrome）*/
-webkit文本笔划：1px黑色；
/*如果我们不使用文本阴影，我们会设置一个后备颜色
用这个来设置颜色
-webkit文本填充颜色：白色*/
颜色：白色；
文本阴影：
3×3×0#000，
/*Firefox和Opera的模拟效果
对WebKit进行了很好的增强*/
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
}

---

M O H A N

你的意思是希望字母周围有一个透明的边框吗？不，我想显示边框，但要使文本和边框之间的空间透明。你尝试过svg吗？@NathanielFlick，我需要用css而不是图片创建它。图片：，单词M在边框外，形状像M，我需要M这个词在firefox中的边框形状像MCould吗？你要的解决方案不能在一个元素中完成，你需要使它适应所有设备我修改它，我给你的解决方案是一个POC，你应该欣赏，否则考虑使用画布或svg@NikunjSardhara您正在将文本和标记加倍。我认为对于一个小的css效果来说，这是不可接受的。虽然，这取决于OP来决定什么对他有效。几乎就像我试图实现的一样，但仍然只是“几乎”，我会先找到另一个答案，然后再考虑这个问题。我还需要文本，而不仅仅是边界