【发布时间】：2011-06-13 23:03:48
【问题描述】：
我想在每个字符周围添加一个黑色轮廓，所以如果字体 id 与前景颜色背景相同，它仍然是可读的。
这可以在带有或不带有浏览器特定 css 的 CSS 中完成吗？
【问题讨论】：
-
Outline effect to text 的可能重复项
标签： css
【发布时间】：2011-06-13 23:03:48
【问题描述】：
您可以使用 CSS 2.1 text-shadow 属性来模拟它：
p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
当然，IE9 及以下版本不支持此功能。有关简单演示，请参阅：http://www.jsfiddle.net/yijiang/UCjgg/。
【讨论】：
-
文本阴影在 IE9 中也不支持。
-
对于那些对Yi Jiang's answer 的语法感到好奇的人，它是： text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;更多信息请参考：W3schools CSS3 text-shadow。
有一种显式的-webkit 方法可以添加文本轮廓，即-text-stroke。这是等效标准跟踪提案的实验性实现（在 CSS3 规范文档中称为 text-outline）。
【讨论】：
在我们等待text-stroke 得到广泛支持的同时，有一个非常好的“text-shadow hack”生成器可以生成您需要的 text-shadow 属性。
https://owumaro.github.io/text-stroke-generator/
h1 {
color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}<h1>yayyy text</h1>【讨论】：
在我开始之前，我想澄清Yi Jiang's answer 是正确的，因为它是你的问题，无论如何我想加一点。
如果您需要兼容的方式来做到这一点，我能想到的唯一方法是使用a font with outline by design。
您甚至可以使用Google's Font API 并拥有一个非常兼容的解决方案。
祝你好运！
【讨论】：
阴影可以解决问题。
h1 {
color: white;
text-shadow: black 0px 0px 2px; /* color offset-x offset-y blur-radius */
}<h1>White text with black outline</h1>【讨论】：