如何设置字体和边框的渐变色

字体渐变色

字体渐变色主要由背景颜色设置，设置字体颜色为透明，背景色渐变。

 background: linear-gradient(#fff, #19B4F7); //设置北京渐变色
  -webkit-background-clip: text; //该属性必须放在background之后，即填充背景区域为文字
  //使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
  color: transparent; //文字本身颜色设置为透明。

边框渐变色

边框渐变色使用css3的linear-gradient即可，设置border-image为渐变。

    border: 10px solid;
    border-image: linear-gradient(to right,transparent,#00B9FC 50%,transparent) 30 30;  
    //这里设置向右渐变，0%为透明 ，50%时为蓝色，100%为透明。

linear-gradient的语法：
这个函数（特性）接受的第一个参数是渐变的角度，他可以接受一个表示角度的值（可用的单位deg、rad、grad或turn）或者是表示方向的关键词（top、right、bottom、left、left top、top right、bottom right或者left bottom）。第二个参数是接受一系列颜色节点（终止点的颜色）。
第二个参数可以为多值，若不设置百分比则按给定的色值渐变，否则，按给定的百分比渐变。