在CSS中有什么方法可以给不同颜色的文本提供轮廓吗?我想突出我的文本的一些部分，使其更直观-如名称，链接等。改变链接的颜色等是常见的现在，所以我想要一些新的东西。
当前回答
字母背后的简单轮廓。 适用于任何字体。任意轮廓宽度。
<style>
text {
stroke-linejoin: round;
text-anchor: middle;
fill: black;
stroke: white;
stroke-width: 12px;
paint-order: stroke;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">Text</text>
</svg>
Codepen: https://codepen.io/RilDev/pen/vYeOjgj?editors=1000
其他回答
文本阴影生成器
这里有很多很棒的答案。看起来文本阴影可能是最可靠的方法来做到这一点。我不会详细说明如何使用文本阴影来做到这一点，因为其他人已经这样做了，但基本思想是在文本元素周围创建多个文本阴影。文本轮廓越大，需要的文本阴影就越多。
所有提交的答案(截至本文)都为文本阴影提供了静态解决方案。我采用了不同的方法，编写了这个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;
}
我们可以使用文本笔画
HTML
<h1>Sample Text</h1>
CSS
h1{
-webkit-text-stroke: 2px red;
text-stroke: 2px red;
}
小菜一碟。试试这个，而不是使用文本阴影
试一试:
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px; } h1.m1 { text-shadow: 2px 2px red; } h1.m2 { text-shadow: 2px 2px 5px red; } h1.m3 { color: white; text-shadow: 2px 2px 4px #000000; } h1.m4 { text-shadow: 0 0 3px #FF0000; } h1.m5{ color: #FFFFFF; background: #232323; text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; } h1.m6{ color: #FFFFFF; background: #FFFFFF; text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5; } h1.m7 { color: #444444; background: #FFFFFF; text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC; } </style> </head> <body> <h1 class="m6">Text-shadow effect!</h1> <h1 class="m7">Text-shadow effect!</h1> <h1>Text-shadow effect!</h1> <h1 class="m1">Text-shadow effect!</h1> <h1 class="m2">Text-shadow effect!</h1> <h1 class="m3">Text-shadow effect!</h1> <h1 class="m4">Text-shadow effect!</h1> <h1 class="m5">Text-shadow effect!</h1> </body> </html>
在CSS3中有一个实验性的webkit属性叫做text-stroke，我一直试图让这个工作一段时间，但到目前为止还没有成功。
我所做的是使用已经支持的文本阴影属性(我相信在Chrome, Firefox, Opera和IE 9中都支持)。
使用四个阴影来模拟笔画文本:
.strokeme { 颜色:白色; 背景颜色:白色; 文字阴影:-1px -1px 0 #000, 1px -1px 0 #000， -1px 1px 0 #000, 1px 1px 0 #000 ｝ < div class = " strokeme”> 此文本在某些浏览器中应该有笔画 < / div >
我在这里为你做了一个演示
这里有一个悬浮的例子
正如Jason C在评论中提到的，除了Opera Mini，所有主流浏览器都支持文本阴影CSS属性。这个解决方案可以向后兼容(对于自动更新的浏览器来说不是问题)，我认为应该使用文本笔画CSS。
我正在寻找一个跨浏览器的文本笔画解决方案，工作时叠加在背景图像。我想我有一个解决方案，不涉及额外的标记，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;
}
