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

.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

我们可以使用文本笔画

HTML

<h1>Sample Text</h1>

CSS

  h1{
    -webkit-text-stroke: 2px red;
    text-stroke: 2px red;
    }

小菜一碟。试试这个，而不是使用文本阴影

我很抱歉，但是如果您已经了解到这里，您将意识到所有其他答案都是不够的，或者需要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"/>

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

文本阴影生成器

这里有很多很棒的答案。看起来文本阴影可能是最可靠的方法来做到这一点。我不会详细说明如何使用文本阴影来做到这一点，因为其他人已经这样做了，但基本思想是在文本元素周围创建多个文本阴影。文本轮廓越大，需要的文本阴影就越多。

所有提交的答案(截至本文)都为文本阴影提供了静态解决方案。我采用了不同的方法，编写了这个JSFiddle，它接受轮廓颜色、模糊和宽度值作为输入，并为元素生成适当的文本阴影属性。只需填写空白，检查预览，然后单击复制css并将其粘贴到您的样式表。

不必要的阑尾

显然，包含指向JSFiddle链接的答案不能被发布，除非它们也包含代码。如果你愿意，你可以完全忽略这个附录。这是我的小提琴生成文本阴影属性的JavaScript。请注意，你不需要在你自己的作品中实现这段代码:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

在CSS3中有一个实验性的webkit属性叫做text-stroke，我一直试图让这个工作一段时间，但到目前为止还没有成功。

我所做的是使用已经支持的文本阴影属性(我相信在Chrome, Firefox, Opera和IE 9中都支持)。

使用四个阴影来模拟笔画文本:

.strokeme { 颜色:白色; 背景颜色:白色; 文字阴影:-1px -1px 0 #000, 1px -1px 0 #000， -1px 1px 0 #000, 1px 1px 0 #000 ｝ < div class = " strokeme”> 此文本在某些浏览器中应该有笔画 < / div >

我在这里为你做了一个演示

这里有一个悬浮的例子

正如Jason C在评论中提到的，除了Opera Mini，所有主流浏览器都支持文本阴影CSS属性。这个解决方案可以向后兼容(对于自动更新的浏览器来说不是问题)，我认为应该使用文本笔画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;
}