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;
    }
  <svg width="100%" height="2300"> 
    <text class="text" x="100" y="150">after work</text>
  </svg>

總結
文章簡單介紹了怎麼使用text-stroke屬性來實現文本描邊效果。有了這個屬性，咱們可以非常輕易的實現文本描邊效果，也告別了使用text-shadow屬性來模擬文本描邊效果。除此之外，還簡單介紹了在SVG中如何實現文本描邊效果。

demo在這