标准 CSS 设置文本的前景色/背景色？答案

【问题标题】：standard CSS to set foreground/background color of text?标准 CSS 设置文本的前景色/背景色？
【发布时间】：2014-03-20 13:00:11
【问题描述】：

是否有标准的 CSS 方法为文本设置 2 种颜色？一个前景色和一个在前景色正下方但稍微偏右的背景色，这样您就可以知道在前景色后面有一个背景色？

类似于下图，但没有 3D 效果。我不在乎背景颜色太深，只要你能区分有两种颜色。一个在前面，一个在它的正下方，但稍微靠右，这样背景颜色也有点可见。

提前感谢您的帮助！ :)

【问题讨论】：

标签： javascript html css text colors

【解决方案1】：

我认为这可能是您正在寻找的 :)

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

[编辑] 示例

text-shadow: 2px 2px #ff0000;

【讨论】：

【解决方案2】：

是的，使用 text-shadow 设置底层文本颜色和背景颜色如下：

.twoColor {

    color: white;
    text-shadow: 2px 2px orange; 

}

<div class="twoColor">David</div>

【讨论】：

【解决方案3】：

字体颜色是通过 CSS 中的“color”属性设置的，但要执行您正在做的事情，您也可以使用“text-shadow”CSS 属性。

看看W3Schools

【讨论】：

【解决方案4】：

您可以像这样为文本设置多个阴影：

text-shadow:    1px 1px #fe4902, 
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;

这看起来与您的图像非常接近。一个很好的例子在这里：

http://css-tricks.com/examples/3DTextTower/

【讨论】：

【解决方案5】：

为了借鉴@Stéphane de Luca 的回答，您可以链接您的文本阴影以创建任意深度的外观：

p {
    text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
}

查看此处了解不同的深度：http://jsfiddle.net/3Acmq/

【讨论】：