假设我有白色字符,我希望每个字符都有黑色轮廓(这与概述整个文本框不同).
制作这个大纲的代码是什么？
编辑:好吧,我不是要求整个文件.我想要的只是一行代码和创建文本大纲所需的参数.我觉得不需要发布代码,因为它实际上只是一个简单的请求.
我尝试过使用,text-outline: 2px 2px #ff0000;但任何主流浏览器都不支持此功能.
范围 :
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;
}
我尝试在字体中使用大纲,以及类和div.没有用.蛮力方法似乎也不起作用.
又一个编辑:
这是我想要大纲的关键线.
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>');
在应用大纲之前,字符串写在一行中.应用大纲后,我们有3行不同的文字.
contentTitle是Google地图中的图例,其中文本对齐位于中心.正在推送的那个句子使用两种不同类型的字体,一种用于单词,另一种用于数字.如果我使用div应用文本阴影,则会创建一个新行.我知道将所有内容保持在同一行的正常解决方案是使用float.但是,如果我漂浮,任何事物都不会集中.
也许我没有正确浮动,但到目前为止我已尝试过div style = float和class ="float".
nii*_*ico 51
from:大纲效果到文字
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
试试CSS3 Textshadow.
.box_textshadow {
text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
在css3please.com上自己尝试一下.
尝试这个：
<!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>...你可能也想这样做：
<!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>您可以根据需要制作任意多个大纲，并且有足够的空间来提出许多创意。
玩得开心！
借助 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>