javascript - 如何在 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;

请注意，无论您的 CSS 中的顺序是什么，它-webkit-text-fill-color总是会覆盖。color

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）

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

我建议你使用 image 而不是这个，因为你不需要担心浏览器的兼容性

Answer 4

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

请参阅此处： http: //www.dennisplucinik.com/blog/2007/09/01/css-hack-text-indent-10000px/这是 Apple 在其网站上创建精美字体的方法。