html - 在文本周围添加描边 - 在外面 - 使用 css？

Question

我有以下 HTML 和 CSS:

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

呈现如下:

我想在它周围添加一个笔划，这意味着这些文本周围有一个黑色边框。
我用 Google 搜索并找到了 -webkit-text-stroke，并得出:

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  -webkit-text-stroke: 2px black;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

然而，效果并不是我想要的:

如您所见，笔画似乎是添加在内部文本中的，这让文本看起来太细了。

我怎样才能在文字之外画笔划？

fiddle :http://jsfiddle.net/jpjbk1z7/

PS:只需要webkit支持

Answer 1

对于文本阴影模拟的平滑外部笔划，使用以下 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 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 轴解决方案上一样。