我有下面的HTML和CSS:

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

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

對(duì)于由文本陰影模擬的平滑外部描邊，請(qǐng)使用以下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;

對(duì)于定制，您可以使用這個(gè)SASS mixin(盡管改變大小對(duì)渲染有副作用):

@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軸解決方案一樣。

Firefox和Safari現(xiàn)在支持一個(gè)名為paint-order的新CSS屬性，可用于模擬外部筆畫:

h1 {
  color: #00ff01;
  font-size: 3em;
  -webkit-text-stroke: 5px black;
}

.fix-stroke {
   paint-order: stroke fill;
}

<h1>the default often is ugly</h1>
<h1 class="fix-stroke">paint-order: stroke fill