首頁 > web前端 > css教學 > 主體

CSS如何實作文字顏色漸層的實例

黄舟
發布: 2017-11-01 10:32:01
原創
2650 人瀏覽過

前言

  主要用到三個CSS屬性

  1.   linear-gradient()   用來實現漸變的圖像

  2.        background-clip 指定物件背景影像向外裁切的區域

  3.        text-fill-color 指定文字的填滿色彩

#實例

      background: linear-gradient(to bottom,#fff 0%,#333 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
登入後複製

  linear-gradient()可以指定漸變角度和顏色,例子中是從上至下的顏色變換

  background-clip:text 已文字的形狀作為裁切區域  text-fill-color:transparent 文字的填滿色是透明的

  效果如下:

  

  ##  

#####  》 ########相容性######  chrome和較新版本的firefox都支援background-clip和text-fill-color屬性,需加-webkit- 前綴######  IE都不支援 background-clip屬性的text值###

以上是CSS如何實作文字顏色漸層的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!