在CSS中有什么方法可以给不同颜色的文本提供轮廓吗?我想突出我的文本的一些部分，使其更直观-如名称，链接等。改变链接的颜色等是常见的现在，所以我想要一些新的东西。
当前回答
我很抱歉，但是如果您已经了解到这里，您将意识到所有其他答案都是不够的，或者需要SVG。
Note: This beautiful outlining will cost you the small price of maintaining a copy of the text in a data-content attribute, which is used by a layered CSS3 ::before element that renders the fill text over the actual outline. .outline { color: black; -webkit-text-stroke: 0.15em black; } .outline::before { content: attr(data-content); -webkit-text-fill-color: white; -webkit-text-stroke: 0; position: absolute; } .outline-wrapper { font-family: "DaytonaW01-CondensedBold", Impact, Times, serif; font-size: 50px; } <div class="outline-wrapper"> <div class="outline" data-content="Take-Two v Anderson">Take-Two v Anderson </div> </div> <link href="https://db.onlinewebfonts.com/c/998b5de3cda797387727724405beb7d4?family=DaytonaW01-CondensedBold" rel="stylesheet" type="text/css"/>
外部样式链接只是为了包含字体，而不是必需的——尽管使用细字体可能需要调整描边参数。
其他回答
多个text-shadows . . 就像这样:
var steps = 10,
i,
R = 0.6,
x,
y,
theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
x = (i / steps) / 2;
y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);
演示:http://jsfiddle.net/punosound/gv6zs58m/
试一试:
<!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>
h1 { 颜色:黑色; -webkit-text-fill-color:白色;/*将覆盖颜色(不管顺序)*/ -webkit-text-stroke-width: 1 px; -webkit-text-stroke-color:黑色; ｝ <标题>正确抚摸!< / h1 >
在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。
字母背后的简单轮廓。 适用于任何字体。任意轮廓宽度。
<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
