css - 你如何创建白色插入文本？

Question

创建深色插入文本很简单。您只需将同一个单词写两次（在本例中使用 text-shadow），但第二次写时将其向下并向右稍微放下，并以较浅的颜色书写，并带有一些不透明度。弄清楚后就容易了。

我遇到的问题是白色插入文本。没有比白色更白的颜色了，因此无法在插图字符内部创造出顶部光线多于下方光线的错觉。我能想到的最好的方法是白色的开头文本，但我想要白色的插入文本。

.dark {
    color:rgba(0, 0, 0, .6);
    text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
    color:rgba(200, 200, 200, 1);
    text-shadow:2px 2px rgba(0, 0, 0, .2);
}

​</p>

小提琴

在 IRC fiddle上找到了答案， 光线从左上角照射，因此 tl z 轴所在的位置看起来更暗

Answer 1

你只需要尝试不同的组合。我还使用了多个文本阴影来制作插入文本样式。

我更喜欢为您的灯光风格这样做：

text-shadow:1px -1px rgba(0, 0, 0, .2);

Answer 2

将深色文本阴影定位在浅色文本阴影的另一侧：

text-shadow: -2px -2px rgba(0, 0, 0, .2);