logo标签列表

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

css
3
我正在尝试使用CSS3复制文本效果。以下是我尝试复制的文本图片： enter image description here
目前为止，以下是我的成果：
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;

}

主要问题在于，我该如何进行白色文字轮廓线的处理？
2个回答
8
所有这些阴影都是不必要的，你只需要使用以下代码就可以实现所需效果：
text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;

阴影的放置是按照语句中定义的层次结构进行的，因此将白色阴影放在开头会将其覆盖在灰色阴影之上，使其看起来像一个边框。

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

1
您可以尝试我的代码。
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 或更多。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接