在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。

多个text-shadows . . 就像这样:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

演示:http://jsfiddle.net/punosound/gv6zs58m/

文本阴影生成器

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

所有提交的答案(截至本文)都为文本阴影提供了静态解决方案。我采用了不同的方法，编写了这个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;
}

我们可以使用文本笔画

HTML

<h1>Sample Text</h1>

CSS

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

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

编辑:文本笔画现在相当成熟，并在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器用户可以支持它，那么您现在应该首先使用文本描边，而不是文本阴影。

你可以也应该只使用文本阴影效果，不需要任何偏移量:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

为什么?当你偏移多个阴影效果时，你会开始注意到笨拙、锯齿状的角: 在一个位置上使用文本阴影效果可以消除偏移，这意味着 如果你觉得太薄，想要一个深色的轮廓，没有问题-你可以重复同样的效果(保持相同的位置和模糊)，几次。像这样:

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

下面是一个例子(上图)，同样的效果重复了14次(下图):

还要注意:因为线条变得很细，所以使用-webkit-font-smoothing: antialiased关闭亚像素渲染是个好主意。

使用更粗的笔画会有点混乱，如果你有sass的乐趣尝试这个mixin，不完美，取决于笔画的重量，它会生成相当多的css。

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}