假设我有一个必须维护的固定字体颜色，并且它覆盖可以是任何颜色的内容，那么无论覆盖什么内容，我如何才能确保字体可读？
这是一个 jsFiddle 来演示我试图描述的效果。 http://jsfiddle.net/4AUDr/
极客观点
项目管理
HarmonyOS
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme 标题使用带有黑色轮廓的白色文本，使其在任何假设的 meme 图像上都可读，但是我认为没有跨浏览器兼容的 CSS 唯一方法可以实现这一点，而且使用较小的字体可能看起来很糟糕。
这个问题有什么解决方案？
原文由 Nikita240 发布，翻译遵循 CC BY-SA 4.0 许可协议
虽然 text-shadow 很好，但它实际上并没有给出您想要的结果。阴影就是阴影，大多数可读文本需要的是“文本边框”。很遗憾。 css 中没有文本边框这样的东西，但我们可以做一个！
我很惊讶有多少不受欢迎的多重阴影。在这种情况下，您可以通过多个阴影创造奇迹：
CSS
p {
color: white;
font-size: 20px;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
}
这种样式将简单地在文本周围（上、下、左、右）添加一个细阴影（细至实际字体大小的 7%）。
但是四个影子够吗？也许你可以用 8 得到更好的结果？看起来答案是肯定的，对我来说很有意义，但也可能是我们在这里过度杀伤了东西。请注意，在这种情况下，我还减小了每个阴影的大小：
CSS
p.with-eight {
text-shadow:
0.05em 0 black,
0 0.05em black,
-0.05em 0 black,
0 -0.05em black,
-0.05em -0.05em black,
-0.05em 0.05em black,
0.05em -0.05em black,
0.05em 0.05em black;
}
然后在彩色背景的这个标记中，你有一个很好读的文本：
HTML
<html>
<body>
<p>This text is readable on any background.</p>
<p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>
原文由 George Dimitriadis 发布，翻译遵循 CC BY-SA 4.0 许可协议
2 回答909 阅读✓ 已解决
3 回答802 阅读✓ 已解决
4 回答1.2k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
2 回答877 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
您可以试验
text-shadow属性（ MDN 文档），例如：（ jsFiddle ）
它在 IE10 中受支持。对于 IE9，您可以按照 此答案 使用专有的 Internet Explorer 过滤器。