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;

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

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