css 颜色渐变

前言

最近接私活,接触到以前公司没有特别注重的一些 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 使用。

1
2
3
4
5
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;
【长按关注】看看↓↓↓?
Eminoda wechat
【前端雨爸】分享前端技术实践,持续输出前端技术文章
欢迎留言,评论交流,一起讨论前端问题