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;

以上代码可以根据自己实际情况做修改。

最后

如果你有更好的方式，欢迎私信或者评论大家一起讨论。