CSS 文字，边框实现从左至右颜色渐变

冷不防 2021-09-18 02:46 616阅读 0赞

1.文本从左至右颜色渐变  
效果图：

![20190220203010773.png][]

2.边框从左至右颜色渐变  
效果图：

![20190220203016770.png][]

实现代码：  
1.文本从左至右颜色渐变实现代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                text {
                    background: linear-gradient(to right, #ffcc99, #814e38);
                    -webkit-background-clip: text;
                    color: transparent;
                    font-size: 50px;
                }
            </style>
        </head>
        <body>
            <text>文字颜色渐变</text>
        </body>
     
    </html>

2.边框从左至右颜色渐变实现代码：

<!DOCTYPE html>
    <html>
     
        <head>
            <meta charset="utf-8">
            <style>
                .btn {
                    border-radius: 30px;
                    color: #814e38;
                    width: 360px;
                    height: 65px;
                    line-height: 55px;
                    font-size: 32px;
                    margin-top: 28px;
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    background-image: linear-gradient(135deg, #fff, #fff), linear-gradient(135deg, #ffcc99, #814e38);
                    border: 2px transparent solid;
                }
            </style>
        </head>
     
        <body>
            <button class='btn'>边框从左至右颜色渐变</button>
        </body>
     
    </html>

若有疑问加q群：581478349

承接web前端开发：

v:![20190220203507663.png][]![20190220203509928.png][]

[20190220203010773.png]: /images/20210724/5e21b01f355549d09897fa4cd69c0681.png
[20190220203016770.png]: /images/20210724/bbfdb54023d9458a8a393470e93f70e0.png
[20190220203507663.png]: https://img-blog.csdnimg.cn/20190220203507663.png
[20190220203509928.png]: /images/20210724/c817712af75c441686b4acff91abb0b1.png