版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/83414645
1.文本从左至右颜色渐变
效果图：
2.边框从左至右颜色渐变
效果图：
实现代码：
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>