如何在HTML / CSS中勾勒文本的轮廓
如何在HTML / CSS中勾勒文本的轮廓
提问于 2012-07-04 14:49:43
假设我有白色字符，我希望每个字符上都有一个黑色的轮廓(这与勾勒整个文本框的轮廓不同)。
制作这个大纲的代码是什么？
编辑:很遗憾，我并不是要一整篇文档。我只需要一行代码和创建文本大纲所需的参数。我觉得没有必要发布代码，因为这真的只是一个简单的请求。
我尝试过使用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;
}我尝试过在字体中使用outline，以及class和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 Maps中的一个传奇，其中文本对齐位于中心。被推送的句子使用两种不同类型的字体，一种用于单词，另一种用于数字。如果我应用一个带有div的文本阴影，就会创建一个新行。我知道保持一切正常的解决方案是使用float。然而，如果我浮动，任何东西都不再居中。
也许我没有正确地浮动，但到目前为止，我已经尝试了div style=float和class="float“。
回答 5
Stack Overflow用户
发布于 2013-06-20 12:39:49
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}Stack Overflow用户
发布于 2012-07-04 15:50:22
试试CSS3 Textshadow。
.box_textshadow {
text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}你自己在css3please.com上试试吧。
Stack Overflow用户
发布于 2015-06-15 19:56:19
试试这个：
<!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你可能也想这样做：
<!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>
你可以想做多少大纲就做多少大纲，而且有足够的空间提出很多有创意的想法。
玩得开心!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11323813
复制相关文章
相似问题