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

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

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字_第1张图片

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

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

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

1px -1px 0 #000,

-1px 1px 0 #000,

1px 1px 0 #000;

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

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字_第2张图片

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;

}

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字_第3张图片

使用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属性的浏览器兼容性如下图:

html text-stoke,使用text-stroke 和 text-shadow制作CSS描边文字_第4张图片

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

相关阅读

你可能感兴趣的:(html,text-stoke)