微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
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>