css 颜色渐变

前言

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

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

边框颜色渐变

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

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

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

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 等取值。

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