css怎麼達成字體描邊效果

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

text-stroke是text-stroke-width和text-stroke-color（填滿文字顏色）兩個屬性的簡寫。

（學習影片分享：css影片教學）

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

實現效果如下：

相關推薦：CSS教學

以上是css怎麼達成字體描邊效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！