text-stroke实现文本描边效果

这个就感兴趣了，来学学

一般都是通过其他的CSS属性来模拟需要的描边效果。

最常见的就是使用text-shadow。

接下来看看如何在Web中实现文本描述效果。

text-stroke是text-stroke-width和text-stroke-color（给文本填充颜色）两个属性的简写。

text-stroke属性常常配合text-fill-color（text-fill-color属性是给文本填充颜色）一起使用：

渐变的文本描边效果，把text-stroke-color设置为transparent：

h2{background:-webkit-linear-gradient(red, blue);-webkit-background-clip: text;-webkit-text-fill-color:#fff;-webkit-text-stroke:6px transparent;}

同样的原理，如果将上面的背景图换成图片，还可以做出以图片为底的描边效果：

h3{background:url(bingzhang.jpg);-webkit-background-clip: text;-webkit-text-fill-color:#fff;-webkit-text-stroke:6px transparent;}

效果图：

其他方法

除了使用text-stroke属性实现文本描边效果之外，还可以直接使用SVG或者Canvas实现文本描边效果。暂时来看SVG的实现方法：

.text{font-size:25px;fill: transparent;stroke-width:1px;stroke:#0f9;}

总结
文章简单介绍了怎么使用text-stroke属性来实现文本描边效果。有了这个属性，咱们可以非常轻易的实现文本描边效果，也告别了使用text-shadow属性来模拟文本描边效果。除此之外，还简单介绍了在SVG中如何实现文本描边效果。

demo在这

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！