如何使用CSS制作更厚的文本阴影？

Question

我想像这样实现这种文字风格：

我想用白色包裹文本，就像我尝试使用

上面的图像一样

   text-shadow: 0px 0px 5px #fff;

但事实证明阴影会变得模糊。我有没有机会使用css（如果是这样的话）？或者我应该将其转换为图像？

Answer 1

你可以模仿它，这样做：

<强> CSS

span{
  text-shadow: 2px 2px 0px  #fff, -2px -2px 0px  #fff, 2px -2px 0px  #fff, -2px 2px 0px  #fff;
}

<强> DEMO HERE

Answer 2

您所寻求的效果称为描边，而cross browser compatible way中的CSS仍然无法使用CSS。

使用阴影伪装不适用于厚度大于1或2像素的笔划，或需要大量分层阴影，从而减慢渲染速度。其他伪造技巧are possible but not quite fantastic。

现在最好的选择仍然是在有用的罕见场合使用图像。

Answer 3

今天进入这个，至少对于Webkit浏览器，有一个更好的解决方案。您可以使用代码

关注this old article

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;

并尝试使用文字阴影。经过一些像素推动后，它对我来说效果很好。我有一些更大的字母，所以我最终使用了像这样的文字阴影

text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;

我希望有所帮助！