博客

这个就感兴趣了，来学学

一般都是通过其他的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;
    }
  <svg width="100%" height="2300"> 
    <text class="text" x="100" y="150">after work</text>
  </svg>

总结


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

demo在这