CSS3文字效果(文字轮廓和阴影效果) [英] CSS3 Text Effect (Text outline and shadow effect)

问题描述

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

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?

推荐答案

不需要所有这些阴影，您可以通过以下方式获得所需的效果:

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.

这篇关于CSS3文字效果(文字轮廓和阴影效果)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！