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;
    }

小菜一碟。试试这个，而不是使用文本阴影

我用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;
}

在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 >

使用这种方法，我能够实现一个轮廓，因为如果你想让你的文本在非常大的轮廓下保持可读性，那么笔画宽度方法就不是一个选择(因为使用笔画宽度，轮廓将从字母内部开始，当宽度大于字母时，它就不容易读了。

注意:我需要这么粗的轮廓的原因是我在“谷歌地图”中模拟街道标签，我想在文本周围有一个白色的粗光晕。这个解决方案对我来说非常有效。

这里有一把小提琴展示了这个解

编辑:文本笔画现在相当成熟，并在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器用户可以支持它，那么您现在应该首先使用文本描边，而不是文本阴影。

你可以也应该只使用文本阴影效果，不需要任何偏移量:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

为什么?当你偏移多个阴影效果时，你会开始注意到笨拙、锯齿状的角: 在一个位置上使用文本阴影效果可以消除偏移，这意味着 如果你觉得太薄，想要一个深色的轮廓，没有问题-你可以重复同样的效果(保持相同的位置和模糊)，几次。像这样:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

下面是一个例子(上图)，同样的效果重复了14次(下图):

还要注意:因为线条变得很细，所以使用-webkit-font-smoothing: antialiased关闭亚像素渲染是个好主意。