在CSS中有什么方法可以给不同颜色的文本提供轮廓吗?我想突出我的文本的一些部分，使其更直观-如名称，链接等。改变链接的颜色等是常见的现在，所以我想要一些新的东西。
当前回答
只要加上这个答案。“描边”和“提纲”是不一样的。
提纲看起来很棒。抚摸看起来很可怕。
其他地方列出的SVG解决方案也存在同样的问题。如果你想要一个大纲，你需要把文本放两遍。一次抚摸，又一次不抚摸。
描边不是勾勒轮廓
body { font-family: sans-serif; margin: 20px; } .stroked { color: white; -webkit-text-stroke: 1px black; } .thickStroked { color: white; -webkit-text-stroke: 10px black; } .outlined { color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; } .thickOutlined { color: white; text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000 } svg { font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white; } .svgStroke { fill: white; stroke: black; stroke-width: 20px; stroke-linejoin: round; } <h1 class="stroked">Properly stroked!</h1> <h1 class="outlined">Properly outlined!</h1> <h1 class="thickStroked">Thickly stroked!</h1> <h1 class="thickOutlined">Thickly outlined!</h1> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text> </svg> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text> <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text> </svg>
PS:我想知道如何使SVG是任何任意文本的正确大小。我感觉这相当复杂，包括生成SVG，用Javascript查询它以获得范围，然后应用结果。如果有更简单的非js方式，我很想知道。
更新:正如@12me21指出的那样，在SVG中，你可以使用paint-order="stroke"在填充之前使它成为stroke，然后你就不必重复文本了
svg { 字体大小:40像素; 粗细:大胆的; 宽度:450 px; 身高:70 px; 填充:白色; ｝ .svgText { 填充:白色; 中风:黑色; 笔划宽度:15 px; stroke-linejoin:圆形; paint-order:中风; ｝ <svg viewBox="0 0 450 70"> <text class="svgText" x="10" y="45">< /文本> < / svg >
其他回答
我用6种不同的阴影得到了更好的结果:
.strokeThis{
text-shadow:
-1px -1px 0 #ff0,
0px -1px 0 #ff0,
1px -1px 0 #ff0,
-1px 1px 0 #ff0,
0px 1px 0 #ff0,
1px 1px 0 #ff0;
}
你可以尝试叠加多个模糊阴影，直到阴影看起来像笔画，如下所示:
.shadowOutline {
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, 0 0 4px black, 0 0 4px black;
}
这里有一个小提琴:http://jsfiddle.net/GGUYY/
我提到它只是为了以防有人感兴趣，尽管我不会称之为解决方案，因为它在很多方面都失败了:
它不能在旧的IE中工作 它在每种浏览器中的呈现方式都不一样 应用这么多阴影是非常沉重的处理:S
文本阴影生成器
这里有很多很棒的答案。看起来文本阴影可能是最可靠的方法来做到这一点。我不会详细说明如何使用文本阴影来做到这一点，因为其他人已经这样做了，但基本思想是在文本元素周围创建多个文本阴影。文本轮廓越大，需要的文本阴影就越多。
所有提交的答案(截至本文)都为文本阴影提供了静态解决方案。我采用了不同的方法，编写了这个JSFiddle，它接受轮廓颜色、模糊和宽度值作为输入，并为元素生成适当的文本阴影属性。只需填写空白，检查预览，然后单击复制css并将其粘贴到您的样式表。
不必要的阑尾
显然，包含指向JSFiddle链接的答案不能被发布，除非它们也包含代码。如果你愿意，你可以完全忽略这个附录。这是我的小提琴生成文本阴影属性的JavaScript。请注意，你不需要在你自己的作品中实现这段代码:
function computeStyle() {
var width = document.querySelector('#outline-width').value;
width = (width === '') ? 0 : Number.parseFloat(width);
var blur = document.querySelector('#outline-blur').value;
blur = (blur === '') ? 0 : Number.parseFloat(blur);
var color = document.querySelector('#outline-color').value;
if (width < 1 || color === '') {
document.querySelector('.css-property').innerText = '';
return;
}
var style = 'text-shadow: ';
var indent = false;
for (var i = -1 * width; i <= width; ++i) {
for (var j = -1 * width; j <= width; ++j) {
if (! (i === 0 && j === 0 && blur === 0)) {
var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
indent = true;
}
}
}
style = style.substring(0, style.length - 2) + '\n;';
document.querySelector('.css-property').innerText = style;
var exampleBackground = document.querySelector('#example-bg');
var exampleText = document.querySelector('#example-text');
exampleBackground.style.backgroundColor = getOppositeColor(color);
exampleText.style.color = getOppositeColor(color);
var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
exampleText.style.textShadow = textShadow;
}
我正在寻找一个跨浏览器的文本笔画解决方案，工作时叠加在背景图像。我想我有一个解决方案，不涉及额外的标记，js和工作在IE7-9(我还没有测试6)，也不会导致混淆问题。
这是一个使用CSS3文本阴影的组合，除了IE (http://caniuse.com/#search=text-shadow)，它有很好的支持，然后使用IE过滤器的组合。目前CSS3文本笔画支持很差。
即过滤器
辉光滤镜(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕，所以我没有使用它。
大卫·休伊特的答案是在不同方向的组合上添加阴影滤镜。ClearType随后不幸被删除，因此我们最终得到了严重的别名文本。
然后我将useragentman上建议的一些元素与dropshadow滤镜结合起来。
把它们放在一起
这个例子是带有白色描边的黑色文本。顺便说一下，我使用条件html类的目标IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)。
#myelement {
color: #000000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
zoom: 1;
}
只要加上这个答案。“描边”和“提纲”是不一样的。
提纲看起来很棒。抚摸看起来很可怕。
其他地方列出的SVG解决方案也存在同样的问题。如果你想要一个大纲，你需要把文本放两遍。一次抚摸，又一次不抚摸。
描边不是勾勒轮廓
body { font-family: sans-serif; margin: 20px; } .stroked { color: white; -webkit-text-stroke: 1px black; } .thickStroked { color: white; -webkit-text-stroke: 10px black; } .outlined { color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; } .thickOutlined { color: white; text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000 } svg { font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white; } .svgStroke { fill: white; stroke: black; stroke-width: 20px; stroke-linejoin: round; } <h1 class="stroked">Properly stroked!</h1> <h1 class="outlined">Properly outlined!</h1> <h1 class="thickStroked">Thickly stroked!</h1> <h1 class="thickOutlined">Thickly outlined!</h1> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text> </svg> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text> <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text> </svg>
PS:我想知道如何使SVG是任何任意文本的正确大小。我感觉这相当复杂，包括生成SVG，用Javascript查询它以获得范围，然后应用结果。如果有更简单的非js方式，我很想知道。
更新:正如@12me21指出的那样，在SVG中，你可以使用paint-order="stroke"在填充之前使它成为stroke，然后你就不必重复文本了
svg { 字体大小:40像素; 粗细:大胆的; 宽度:450 px; 身高:70 px; 填充:白色; ｝ .svgText { 填充:白色; 中风:黑色; 笔划宽度:15 px; stroke-linejoin:圆形; paint-order:中风; ｝ <svg viewBox="0 0 450 70"> <text class="svgText" x="10" y="45">< /文本> < / svg >
