在CSS中有什么方法可以给不同颜色的文本提供轮廓吗?我想突出我的文本的一些部分，使其更直观-如名称，链接等。改变链接的颜色等是常见的现在，所以我想要一些新的东西。
当前回答
你可以尝试叠加多个模糊阴影，直到阴影看起来像笔画，如下所示:
.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
其他回答
我用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;
}
试一试:
<!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。
我也有这个问题，文本阴影不是一个选项，因为角落看起来很糟糕(除非我有很多很多阴影)，我不想要任何模糊，因此我唯一的其他选择是做以下:有2个div，对于背景div，放一个-webkit-text-stroke，然后允许尽可能大的轮廓你喜欢。
div { 字体大小:200 px; 位置:绝对的; 空白:nowrap;} ｝ .front { 颜色:蓝色; ｝ .outline { -webkit-text-stroke: 30px红色; 用户选择:没有; ｝ < div class = "大纲" > 大纲文本 < / div > < div class = "正面" > 大纲文本 < / div >
使用这种方法，我能够实现一个轮廓，因为如果你想让你的文本在非常大的轮廓下保持可读性，那么笔画宽度方法就不是一个选择(因为使用笔画宽度，轮廓将从字母内部开始，当宽度大于字母时，它就不容易读了。
注意:我需要这么粗的轮廓的原因是我在“谷歌地图”中模拟街道标签，我想在文本周围有一个白色的粗光晕。这个解决方案对我来说非常有效。
这里有一把小提琴展示了这个解
使用更粗的笔画会有点混乱，如果你有sass的乐趣尝试这个mixin，不完美，取决于笔画的重量，它会生成相当多的css。
@mixin stroke($width, $colour: #000000) {
$shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
@for $i from 0 through $width {
$shadow: $shadow,
-$i + px -$width + px 0 $colour,
$i + px -$width + px 0 $colour,
-$i + px $width + px 0 $colour,
$i + px $width + px 0 $colour,
-$width + px -$i + px 0 $colour,
$width + px -$i + px 0 $colour,
-$width + px $i + px 0 $colour,
$width + px $i + px 0 $colour,
}
text-shadow: $shadow;
}
