CSS3文字效果（文字轮廓和阴影效果）(CSS3 Text Effect (Text outline and shadow effect))

CSS3文字效果（文字轮廓和阴影效果）(CSS3 Text Effect (Text outline and shadow effect))

我正在尝试使用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; }

这里的主要问题是，我如何处理文本白色轮廓？

I am trying to copy a text effect using css3

Here is the image of the text I am trying to copy:

Here is what I have upto now:

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; }

The main problem here is, how do I do the text white outline?

最满意答案

所有这些阴影都是不需要的，你可以通过以下方式达到预期的效果：

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

阴影贴图按声明中定义的层次结构进行工作，因此将白色阴影放置在起始位置会将其放在灰色阴影的顶部，并使其看起来像边框。

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

All of those shadows aren't needed, you can achieve the desired affect with just this:

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

Shadow placement works by hierarchy of when it was defined in the statement, so placing the white shadow at the start will layer it on top of the gray shadow and cause it to look like a border.

It's also worth noting that the white border will only display over the shadow and not around the text, thus placing the text on a darker background would show no white border towards the top and left sides of the word.