CSS3文字效果（文字轮廓和阴影效果）

Question

我正在尝试使用css3复制文本效果

以下是我要复制的文字图片：

以下是我现在的情况：

h1 {

font-size:4em;  
color: #E6012F;

text-shadow:
      3px 3px 0 #888087,
     -1px -1px 0 #888087,  
      1px -1px 0 #888087,
      -1px 1px 0 #888087,
      1px 1px 0 #888087;

}

这里的主要问题是，如何进行文字白色轮廓？

Answer 1

不需要所有这些阴影，只需这样就可以达到预期的效果：

text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;

阴影放置按照语句中定义的层次结构进行工作，因此将白色阴影放在开始处会将其叠加在灰色阴影的顶部，使其看起来像边框。

值得注意的是，白色边框只会显示在阴影上而不会显示在文本周围，因此将文本放在较暗的背景上会显示没有朝向文字顶部和左侧的白色边框。

Answer 2

您可以尝试我的代码

text-shadow: 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 3px 3px #000;

如果您想要更多阴影，可以将1px 3px 3px #000更改为1px 4px 3px #000或更多