在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/
其他回答
这个用于SASS的mixin将给出平滑的结果，使用8轴:
@mixin stroke($size: 1px, $color: #000) {
text-shadow:
-#{$size} -#{$size} 0 $color,
0 -#{$size} 0 $color,
#{$size} -#{$size} 0 $color,
#{$size} 0 0 $color,
#{$size} #{$size} 0 $color,
0 #{$size} 0 $color,
-#{$size} #{$size} 0 $color,
-#{$size} 0 0 $color;
}
和普通CSS:
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;
h1 { 颜色:黑色; -webkit-text-fill-color:白色;/*将覆盖颜色(不管顺序)*/ -webkit-text-stroke-width: 1 px; -webkit-text-stroke-color:黑色; ｝ <标题>正确抚摸!< / h1 >
我们可以使用文本笔画
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>
我很抱歉，但是如果您已经了解到这里，您将意识到所有其他答案都是不够的，或者需要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"/>
外部样式链接只是为了包含字体，而不是必需的——尽管使用细字体可能需要调整描边参数。
