如何从中心制作非模糊的文字阴影？

Question

如何制作一个没有模糊效果的文字阴影，如下所示： enter image description here

Answer 1

text-stroke是您正在寻找的CSS属性，但如果您需要支持IE / Edge，则需要使用text-shadow来伪造它。

请注意，对于后者，您必须使用多个阴影来实现所需的厚度，并且多个值可能会变得相当冗长。 （您可以在字母的角落看到，需要更多的多个值才能使其看起来更平滑，如果您希望拥有超过2个像素的话，还需要更多值...）

span {
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 700;
  color: #f00;
}

.stroked {
  -webkit-text-stroke: 3px black;
  text-stroke: 3px black;
}

.outlined {
  text-shadow: 2px 2px 0 #000,
  -2px -2px 0 #000,
  2px -2px 0 #000,
  -2px 2px 0 #000,
  0px 2px 0 #000,
  2px 0px 0 #000,
  0px -2px 0 #000,
  -2px 0px 0 #000;
}

<span class="stroked">text-stroke</span><br>
<span class="outlined">text-shadow</span>