如何在css / html / javascript中为我的文本添加边框

Question

我有问题，我想用html，css或javascript在我的文字上添加边框。边框的大小应为10px。这可能吗？

所以它应该是这样的：

希望你能提供帮助，

问候 克里斯

Answer 1

如上所述，您可以使用text-shadow尝试此操作，但不建议这样做。我编辑了Ankit的解决方案，因为它看起来有别名：

http://jsfiddle.net/ZnfED/1409/

text-shadow: 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black;

正如Eric Brockman所说，您可以使用text-stroke，但大多数浏览器目前不支持。它适用于-webkit-前缀浏览器。

以下是一个示例小提琴：http://jsfiddle.net/ZnfED/1410/

   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;

请注意，-webkit-text-fill-color将始终覆盖color，无论CSS中的顺序如何。

Answer 2

尝试将此添加到您的样式表中：

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

在此处详细了解此选项：http://css-tricks.com/adding-stroke-to-web-text/

Answer 3

你需要很多阴影，阴影的数量越多效果越好

{
    font-size:80px;
    color: green;
   text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

以下是演示它的链接：http://jsfiddle.net/ZnfED/1408/ 你可以使用text-shadow属性中的任何其他值来增加/减少阴影的宽度（我使用的是4px）

注意：仅少数浏览器支持此功能

我建议您使用图片代替此，因为您不需要担心浏览器兼容性

Answer 4

我建议您创建一个透明的.PNG图像，而不是依赖于实验性功能，该图像看起来与您发布的图像相同，创建具有必要文本和宽度的div，然后设置{{1} CSS中的text-indent属性。使用background属性将PNG图像设置为-9999px的背景。你将成功使用div黑客。

请参阅此处：http://www.dennisplucinik.com/blog/2007/09/01/css-hack-text-indent-10000px/这是Apple用于在其网站上创建漂亮排版的方法。