css怎麼實現字型描邊效果

css實現字型描邊效果的方法：可以利用text-stroke屬性來實現字型描邊效果，如【-webkit-text-stroke:6px transparent;】。text-stroke屬性常配合text-fill-color屬性一起使用。

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;
    }

實現效果如下：