CSS如何?文字色彩坡形的執行個體

前言

　　主要用到三個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值