text-stroke实现文本描边效果
早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。当然，在SVG或者Canvas中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在Web中实现文本描述效果。
text-shadow实现文本描边
text-shadow是实现Web描述效果中最为常见的一种方案，简单的原理就是在文本的上、下、左、右添加文本阴影（不带模糊的阴影）。比如：
h1 {
text-shadow:
-.025em -.025em 0 #444,
.025em -.025em 0 #444,
-.025em .025em 0 #444,
.025em .025em 0 #444;
}
你将看到的效果如下：
text-stroke
值得庆幸的是，现在可以直接使用text-stroke属性实现描述效果。在介绍text-stroke怎么实现文本描边效果之前，先简单了解其怎么使用。
text-stroke是text-stroke-width和text-stroke-color两个属性的简写写法。
text-stroke: <width> <color>;
text-stroke属性常常配合text-fill-color（text-fill-color属性是给文本填充颜色）一起使用：
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 6px #f36;
}
看到的效果如下：
记得以前要实现渐变的文本描边效果，是件痛苦的事情，那有了text-stroke属性就好搞多了，不过要把text-stroke-color设置为transparent：
h1 {
background: linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
-webkit-text-stroke: 6px transparent;
}
效果如下：
同样的原理，如果将上面的背景图换成图片，还可以做出以图片为底的描边效果：
其他方法
除了使用text-stroke属性实现文本描边效果之外，还可以直接使用SVG或者Canvas实现文本描边效果。暂时来看SVG的实现方法：
<svg width="100%" height="300">
<text class="text" x="100" y="150">w3cplus</text>
</svg>
.text {
fill: transparent;
stroke-width:8px;
stroke: #0f9;
}
效果如下：
使用SVG还可以配合animation做一些有动效的描边效果：
刚才也说了，除了SVG还有Canvas。
<canvas id="canvasOne" width="500" height="300">
function drawScreen() {
context.lineWidth = 6;
context.font = '8em/1 Bangers, sans-serif';
context.strokeStyle = '#f36';
context.strokeText('w3cplus',50,150);
}
drawScreen();
效果如下：
总结
文章简单介绍了怎么使用text-stroke属性来实现文本描边效果。有了这个属性，咱们可以非常轻易的实现文本描边效果，也告别了使用text-shadow属性来模拟文本描边效果。除此之外，还简单介绍了在SVG和Canvas中如何实现文本描边效果。
大漠
如需转载，烦请注明出处：https://www.fedev.cn/css3/text-stroke.htmlZoom With Nike