当前位置主页 > 资料库 > 前端教程 > 使用text-stroke 和 text-shadow制作CSS描边文字

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

2017-05-09
麦子学院

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

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

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

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

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

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

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

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

css 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属性制作的描边文字线条的接口处是完全闭合的。

使用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属性的浏览器兼容性
css text-stroke属性的浏览器兼容性
相关阅读
Previous:
上一篇:深入了解style标签元素
Next:
下一篇:使用JavaScript制作打字机文本效果

我要评论

返回顶部