CSS实现字体渐变色,边框渐变色
前言字体实现渐变色边框渐变色最后前言
前段时间有做过字体渐变色和边框渐变色的需求,再此整理一下,以供大家参考。
字体实现渐变色
background: linear-gradient(to right, red, blue);-webkit-background-clip: text;color: transparent;
以上代码一起用可以实现字体渐变色,注意:使用渐变色的时候不要使用background-color,之前本人试验过,这个不起作用。
边框渐变色
border: 0.01rem solid transparent;border-radius: 0.11rem;position: relative;background-image: linear-gradient(#fff, #fff),linear-gradient(105deg, #fc8011 0%, #fcaa22 100%);background-origin: border-box;background-clip: content-box, border-box;
以上代码可以根据自己实际情况做修改。
最后
如果你有更好的方式,欢迎私信或者评论大家一起讨论。