600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > CSS 文字 边框实现从左至右颜色渐变

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

时间:2019-08-11 16:42:48

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。