Html 使用css在文本周围（外部）添加笔划？

我有以下HTML和CSS：

正文{背景色：灰色；} h1{ 颜色：白色； 字号：2.5em； } 您应该使用哪种字体？-webkit文本笔划不支持将笔划放置在文本的外部 这说明：

由文本笔划绘制的笔划与文本的中心对齐 形状为Adobe Illustrator中的默认值，当前 没有将对齐设置为形状内部或外部的选项。 不幸的是，这使得它的可用性大大降低，不管现在发生什么 笔划干扰了字母的形状，破坏了图形 原始类型设计者的意图。环境是理想的，但如果我们 如果要选一个，外线击球会有用得多

SVG呢？ 好吧，它似乎也把笔划放在了内侧-

然而 根据需要，您可以通过以下方式模拟此效果：

1将字体更改为无衬线字体，如verdana和

2将要添加笔划的文本的字体大小稍微大一点

身体{ 背景：灰色； 字体系列：verdana； } (打、击等的)一下 1.没有中风{ 颜色：白色； 字号：2.5em； } .中风{ -webkit文本笔划：2px黑色； 字号：2.7em； } 你应该吃什么菜？

---

你应该有什么样的载体？文本阴影可以用来达到这个效果 一个选项是使用文本阴影模拟笔划。例如：

text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

---

我也尝试过文本阴影和-webkit文本笔划，但都不成功。 我只能通过制作两个divs background和front来获得结果，即

背景div带-webkit文本笔划，前景div不带-webkit文本笔划

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;
                -webkit-text-stroke-color:black;
                -webkit-text-stroke-width:0.04em;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

Bt通过生成的html唯一的问题是，当div重复两次时，内存中的大小是原来的两倍

---

有谁有更好的解决方案吗？

我知道这是一个老问题，但看看这个：

您可以简单地将另一个文本放置在具有绝对定位的笔划文本的顶部，它不是那么整洁，但它解决了问题

<div class="container">
  <h1 class="stroke">Stroke</h1>
  <h1 class="no-stroke">Stroke</h1>
</div>

.container{
  width:300px;
}

.stroke{
  position:absolute;
  -webkit-text-stroke: 10px black;
}

.no-stroke{
  color:white;
  position:absolute
}

---

对于由文字阴影模拟的平滑外部笔划，请使用以下8轴阴影：

  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;

对于自定义，您可以使用此SASS mixin，尽管更改大小会对渲染产生副作用：

@mixin stroke($color: #000, $size: 1px) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

---

这提供了一个非常平滑的笔划，没有遗漏的部分，就像在4轴解决方案中一样。

我发现的一种方法是将两个元素堆叠在一起，让后面的元素获得双笔划宽度。后面的元素将笔划泄漏到可见元素的外部，使其成为外部的真实笔划

另外，另一个选项是使用：after创建第二个元素。缺点是无法通过编程方式更改笔划

这可能无法在大笔划值上正常工作

正文{背景色：灰色；} h1{ 颜色：白色； 字号：2.5em； 字体系列：verdana； } .stroke{-webkit文本笔划：2px黑色；} .stack.stroke{-webkit文本笔划：4px黑色；} h1.stroke-fs{字体大小：2.7em；} .stack{position:relative；} .stack>h1:非：第一个子级{ 左：0； 保证金：0； 位置：绝对位置； 排名：0； } .中风后{ -webkit文本笔划：4px黑色； 内容：价值观； 位置：绝对位置； 排名：0； 左：0； z指数：-1； } 堆栈 你应该吃什么菜？ 你应该吃什么菜？ 之后 你应该吃什么菜？ 出生地的 你应该吃什么菜？ 字号

---

Firefox和Safari现在支持一个新的CSS属性，名为：

h1{ 颜色：00ff01； 字号：3em； -webkit文本笔划：5px黑色； } .固定行程{ 绘制顺序：笔划填充； } 违约通常是丑陋的

---

绘制顺序：笔划填充我创建了一个SASS mixin，可以轻松地使用前缀属性-webkit，-moz（如果支持）创建文本轮廓，但可以使用带有文本阴影的颜色。请注意，回退方法不能很好地处理不透明填充颜色，但除此之外，我认为这是一个非常好的解决方案，直到我们能够得到一个具有更好浏览器支持的标准方法

混合

示例用法

使文本具有半透明的黑色和白色轮廓

.heading-outline {
  @include text-stroke(rgba(#000,.5), #fff, 1px);
}

---

使用文本阴影。示例：我在google上发现：使用带有-webkit text stroke属性设置的：before伪元素创建主文本的带笔划副本，然后使用z-index将副本放在原始文本后面，结束与外部笔划可能与文字阴影的复制你可以得到一些模糊的阴影，你可以得到最好的边界固体与这只是1px。。。我认为OP不希望这样。此外，还应避免只提供链接答案，并提供一些代码作为获得投票的示例：这是一个很好的跨浏览器解决方案，因为您将获得。。。不幸的是，对于较厚的边框，这在衬线字体上看起来很奇怪。对于更平滑的版本，使用8轴而不是4轴。请参阅我的答案以获取代码。还找到了

---

post on:before和：after现在可以使用@FelipeCortez SHIME将笔划放置在文本之外，这在许多浏览器中不受支持，例如Chrome，因为绘制顺序非常有用非常酷和简单。唯一的问题是，我不明白为什么它的顶部的笔划比底部的笔划稍厚。在我放大之前，它看起来是正确的。谢谢你，莱尔！当我试图模拟字幕文本周围的轮廓时，你的8轴轮廓拯救了我。我试过canvas，但后来发现它不支持下划线。使用JS——使用变量替换用户选择的像素宽度——在几个小时内解决了软件难题。如果这也被添加到Chrome中，那将是非常棒的！是的，不幸的是，它在Chrome中仍然不起作用：@mmaismma感谢您的编辑，但是caniuse.com上的支持表是关于SVG元素的绘制顺序支持。不幸的是，Google Chrome仍然不支持HTML元素的绘制顺序。截至Chrome 84 2020年7月13日-Chrome现在支持绘制顺序@RockyKev不，不幸的是它没有。见我上面的评论。或者使用Chrome单击上面的“运行代码片段”按钮

.heading-outline {
  @include text-stroke(rgba(#000,.5), #fff, 1px);
}