前言

最近接私活，接触到以前公司没有特别注重的一些 css 效果，比如：颜色渐变。

虽然随便百度下能解决问题，但还是想正儿八经的整理下类似需求。

边框颜色渐变

直接使用 linear-gradient 来描述颜色即可，但这个不能作用于 border 或者 border-color 属性，需要用在 border-image 上！

1	border: 20px solid linear-gradient(red, green); //error

上篇讲过《css border-image 属性》，所以如果有了这块的了解，那 border 的渐变将非常容易。

1 2	border: 20px solid; border-image: linear-gradient(to right, red, green) 30 30;

背景色渐变

背景色要使用渐变色可以直接在 background 上定义，或者在 background-image 上定义。但不能再 background-color 使用。

background-image: linear-gradient(yellow, green);
/* or */
background: linear-gradient(yellow, green);
/* error */
background-color: linear-gradient(yellow, green);

字体渐变

字体渐变会有很大不同，首先我们需要设置一个背景色，然后将字体颜色设置为透明，这样背景色将为做文字颜色。

另外，还需要设置 background-clip 属性，这个属性将控制背景色延伸到哪个位置。

比如为 text，背景色将全用于字体（注意此值只属于 webkit）。其他还有：border-box、padding-box、content-box 等取值。

1
2
3

background-image: linear-gradient(yellow, green);
-webkit-background-clip: text;
color: transparent;