微信小程序开发交流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>