使用CSS实现背景色渐变、边框渐变、字体渐变效果。背景色gradient.bg-block{background:linear-gradient(tobottom,#F80,#2ED);}效果如图：linear-gradient:([|to,]?[,+])角度|side-to-corner定义渐变线，to-bottom等于180deg，to-top等于0deg。color-stop定义了渐变的颜色，渐变长度可以用百分比指定。例如：background:linear-gradient(180deg,#F8070%,#2ED);成酱：背景色渐变很简单，只是在上面的css代码中，在background属性中加入了linear-gradient。所以我测试了添加了哪个属性。首先，我觉得它被添加到background-color中。修改代码background为background-color后，果然渐变色消失了。仔细看看linear-gradient的定义：linear-gradient()函数创建的图像由两种或多种颜色之间沿直线的渐进过渡组成。它的结果是一个数据类型的对象，是一种特殊的[]，所以这应该是一张图片，修改代码background为background-image，渐变色保持如上图。字体渐变字体渐变不是那么容易想到的，参考张新旭的文章，实现如下：.font-block{font-size:48px;背景图像：线性渐变（到底部，#F80，#2ED）；-webkit-背景剪辑：文本；-webkit-text-fill-color:transparent;}效果如下：这种字体渐变的方法可以这样理解：字体本身是有颜色的，先让字体本身的颜色变透明（text-fill-coloristransparent)，然后添加渐变背景色(background-image:line-gradient...)，但是让背景色作用于字体(background-clip:text)。需要注意的是text-fill-color是一个非标准属性，但是大部分浏览器都支持-webkit前缀，所以使用时需要带上-webkit前缀。虽然background-clip属性已经被大部分浏览器支持，但是浏览器支持text属性值需要加上-webkit前缀。（参考这里：https://developer.mozilla.org...）以上两项在使用postcss时通常不会自动加前缀，所以不能偷懒。注意-webkit-text-fill-color:transparent对字体的影响，因为设置了透明度，笔者在使用时踩坑，同时使用了text-overflow:ellipsis；这时，我一点也看不见了。边框gradient.border-block{border:10pxsolidtransparent;边框图像：线性渐变（到顶部，#F80，#2ED）；border-image-slice:10;}效果如下：给border-image添加linear-gradient并不难理解，但是如果单纯的使用border-image，你会发现效果是这样的：所以关键作用是border-image-slice属性。首先看border-image属性。border-image是border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat的缩写。border-image-source属性可以给出一个url作为边框图片，类似于background-image:url的用法；border-image-slice是指将borderimage切割成9份，四个角和四个边，以及一个中心区域。9个切割部分分布在框架的9个区域。当框的宽度和切图的宽度不相等时，四个顶角的变化有一定的拉伸作用。border-image-slice属性的默认值为100%。这个百分比是相对于边框图像的宽度和高度的。当左右切片的宽度之和>100%时，数字5和7会留空，不能使用默认值。到填充的边框图像。关于boder-image的详细介绍可以参考本参考资料的第一篇文章，比较详细。参考文献1。CSS3边框图片详解：http://www.360doc.com/content...2.linear-gradientMDN：https://developer.mozilla.org...
