如何在 HTML / CSS 中勾勒文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11323813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to outline text in HTML / CSS
提问by krikara
Let's say I have white characters and I want a black outline over each character (this is different from outlining the whole text box).
假设我有白色字符，并且我希望每个字符上都有一个黑色轮廓（这与勾勒整个文本框的轮廓不同）。
What is the code to make this outline ?
制作这个大纲的代码是什么？
EDIT: Well bummer, I'm not asking for a whole document. All I want is the one line of code and the needed parameters to create an outline for text. I don't feel the need to post code as it is really just a simply request.
编辑：糟糕，我不是要一份完整的文件。我想要的只是一行代码和创建文本大纲所需的参数。我觉得没有必要发布代码，因为它实际上只是一个简单的请求。
I have tried using text-outline: 2px 2px #ff0000;but this is not supported across any major browsers.
我试过使用，text-outline: 2px 2px #ff0000;但任何主要浏览器都不支持。
Scope :
范围 ：
function createTitleLegend() {
legendTitle = document.createElement('div');
legendTitle.id = 'legendT';
contentTitle = [];
contentTitle.push('<h3><font size="16">TM</font></h3>');
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
legendTitle.innerHTML = contentTitle.join('');
legendTitle.index = 1;
}
I have tried using outline within the font, as well as a class and div. None works. The bruteforce approach doesn't seem to work either.
我尝试在字体中使用轮廓，以及类和 div。没有工作。蛮力方法似乎也不起作用。
Yet another EDIT:
另一个编辑：
This is the key line where I want the outline.
这是我想要轮廓的关键线。
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');
Before I apply the outline, the string is written in one line. After I apply the outline, we have 3 different lines of text.
在我应用大纲之前，字符串写在一行中。应用大纲后，我们有 3 行不同的文本。
contentTitle is a legend in a Google Maps where the text align is at the center. That sentence that is being pushed uses two different type of fonts, one for the words and one for the number. In the event that I apply a text shadow with a div, that creates a new line. I know the normal solution for keeping everything in the same line is the use of float. However if I float, nothing is centered anymore.
contentTitle 是谷歌地图中的一个图例，文本对齐位于中心。推送的那句话使用两种不同类型的字体，一种用于单词，一种用于数字。如果我应用带有 div 的文本阴影，则会创建一个新行。我知道将所有内容保持在同一行的正常解决方案是使用浮动。但是，如果我漂浮，则不再居中。
Maybe I'm not floating correctly, but I've tried both div style=float and class="float" thus far.
也许我没有正确浮动，但到目前为止我已经尝试了 div style=float 和 class="float" 。
回答by niico
from: Outline effect to text
来自：轮廓效果到文本
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
回答by algi
Try CSS3 Textshadow.
试试 CSS3 Textshadow。
.box_textshadow {
text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
Try it yourself on css3please.com.
在 css3please.com 上亲自尝试一下。
回答by WonderWorker
Try this:
尝试这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
font: Tahoma, Geneva, sans-serif;
font-size: 64px;
color: white;
text-shadow:
/* Outline */
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-2px 0 0 #000000,
2px 0 0 #000000,
0 2px 0 #000000,
0 -2px 0 #000000; /* Terminate with a semi-colon */
}
</style></head>
<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>...and you might also want to do this too:
...你可能也想这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
font: Tahoma, Geneva, sans-serif;
font-size: 64px;
color: white;
text-shadow:
/* Outline 1 */
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-2px 0 0 #000000,
2px 0 0 #000000,
0 2px 0 #000000,
0 -2px 0 #000000,
/* Outline 2 */
-2px -2px 0 #ff0000,
2px -2px 0 #ff0000,
-2px 2px 0 #ff0000,
2px 2px 0 #ff0000,
-3px 0 0 #ff0000,
3px 0 0 #ff0000,
0 3px 0 #ff0000,
0 -3px 0 #ff0000; /* Terminate with a semi-colon */
}
</style></head>
<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>You can do as many Outlines as you like, and there's enough scope for coming up with lots of creative ideas.
您可以随心所欲地制作大纲，并且有足够的空间来提出许多创意。
Have fun!
玩得开心！
回答by enfascination
With HTML5's support for svg, you don't need to rely on shadow hacks.
借助 HTML5 对 的支持svg，您无需依赖影子黑客。
<svg width="100%" viewBox="0 0 600 100">
<text x=0 y=20 font-size=12pt fill=white stroke=black stroke-width=0.75>
This text exposes its vector representation,
making it easy to style shape-wise without hacks.
HTML5 supports it, so no browser issues. Only downside
is that svg has its own quirks and learning curve
(c.f. bounding box issue/no typesetting by default)
</text>
</svg>