h1 { 颜色:黑色; -webkit-text-fill-color:白色;/*将覆盖颜色(不管顺序)*/ -webkit-text-stroke-width: 1 px; -webkit-text-stroke-color:黑色; ｝ <标题>正确抚摸!< / h1 >

我很抱歉，但是如果您已经了解到这里，您将意识到所有其他答案都是不够的，或者需要SVG。

Note: This beautiful outlining will cost you the small price of maintaining a copy of the text in a data-content attribute, which is used by a layered CSS3 ::before element that renders the fill text over the actual outline. .outline { color: black; -webkit-text-stroke: 0.15em black; } .outline::before { content: attr(data-content); -webkit-text-fill-color: white; -webkit-text-stroke: 0; position: absolute; } .outline-wrapper { font-family: "DaytonaW01-CondensedBold", Impact, Times, serif; font-size: 50px; } <div class="outline-wrapper"> <div class="outline" data-content="Take-Two v Anderson">Take-Two v Anderson </div> </div> <link href="https://db.onlinewebfonts.com/c/998b5de3cda797387727724405beb7d4?family=DaytonaW01-CondensedBold" rel="stylesheet" type="text/css"/>

外部样式链接只是为了包含字体，而不是必需的——尽管使用细字体可能需要调整描边参数。

我用6种不同的阴影得到了更好的结果:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

你可以尝试叠加多个模糊阴影，直到阴影看起来像笔画，如下所示:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

这里有一个小提琴:http://jsfiddle.net/GGUYY/

我提到它只是为了以防有人感兴趣，尽管我不会称之为解决方案，因为它在很多方面都失败了:

它不能在旧的IE中工作 它在每种浏览器中的呈现方式都不一样 应用这么多阴影是非常沉重的处理:S

我也有这个问题，文本阴影不是一个选项，因为角落看起来很糟糕(除非我有很多很多阴影)，我不想要任何模糊，因此我唯一的其他选择是做以下:有2个div，对于背景div，放一个-webkit-text-stroke，然后允许尽可能大的轮廓你喜欢。

div { 字体大小:200 px; 位置:绝对的; 空白:nowrap;} ｝ .front { 颜色:蓝色; ｝ .outline { -webkit-text-stroke: 30px红色; 用户选择:没有; ｝ < div class = "大纲" > 大纲文本 < / div > < div class = "正面" > 大纲文本 < / div >

使用这种方法，我能够实现一个轮廓，因为如果你想让你的文本在非常大的轮廓下保持可读性，那么笔画宽度方法就不是一个选择(因为使用笔画宽度，轮廓将从字母内部开始，当宽度大于字母时，它就不容易读了。

注意:我需要这么粗的轮廓的原因是我在“谷歌地图”中模拟街道标签，我想在文本周围有一个白色的粗光晕。这个解决方案对我来说非常有效。

这里有一把小提琴展示了这个解

字母背后的简单轮廓。 适用于任何字体。任意轮廓宽度。

<style>
  text {
    stroke-linejoin: round;
    text-anchor: middle;
    fill: black;
    stroke: white;
    stroke-width: 12px;
    paint-order: stroke;
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">Text</text>
</svg>

Codepen: https://codepen.io/RilDev/pen/vYeOjgj?editors=1000