html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字

描边文字指的是文字只显示描边轮廓。在CSS中，有两种方法可以实现描边文字，分别是为文字设置text-stroke和text-shadow属性。

text-shadow属性可以为文字设置阴影效果。使用text-shadow属性来制作描边文字是个不错的选择，下面的是一段示例代码：

h1 {text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;}

通常两重阴影就可以得到一个不错的描边文字效果，上面代码的结果如下图：

text-shadow两重阴影时得到的描边效果

你会发现使用两重阴影得到的描边效果比较模糊，这和字体有关，某些字体会得到比较清晰的描边效果。上边使用的是微软雅黑字体，描边效果比较模糊。为此，我们可以使用四重阴影俩设置文字的描边效果：

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

1px -1px 0 #000,

-1px 1px 0 #000,

1px 1px 0 #000;

使用四重text-shadow阴影，每一重都往不同的方向偏移一个像素，得到下面的效果：

text-shadow四重阴影时得到的描边效果

使用text-shadow来制作描边文字最大的问题是某些线条的接口处不是完全闭合的，仔细观察上面的图片就可以看到。

另外一个制作描边文字的方案是使用text-stroke属性：

text-stroke: thickness color;

text-stroke属性只能指定描边线条的粗细，不能指定线条的样式(如使用虚线描边等)。webkit内核的浏览需要为text-stroke属性添加-webkit-前缀：

h1 {

-webkit-text-stroke: 1px black;

text-stroke: 1px black;

}

使用text-stroke来制作文字描边效果

可以看到，使用text-stroke属性制作的描边文字线条的接口处是完全闭合的。

使用text-stroke属性需要注意的一个问题是，描边的颜色和文字的背景颜色相同时，某些浏览器会看不到任何效果。例如：

h1 {

color: white;

-webkit-text-stroke: 2px black;

text-stroke: 2px black;

background: white;

}

上面的代码使H1标题文字在Chrome 或 Safari浏览器中呈现描边文字效果，但是在其它浏览器中没有任何效果。

要解决上面的问题，你可以先使用color属性来设置文字的颜色，然后通过text-fill-color属性来覆盖文字的颜色，这样在不支持描边的浏览器中，文字会显示为color属性指定的颜色：

h1 {

color: black;

-webkit-text-fill-color: white;

text-fill-color: white;

-webkit-text-stroke: 2px black;

text-stroke: 2px black;

background: white;

}

text-stroke属性和text-fill属性的浏览器兼容性如下图：

css text-stroke属性的浏览器兼容性

相关阅读