.btn {
height: 80rpx;
line-height: 80rpx;
color: #00569d;
padding: 0 10rpx;
border-radius: 20rpx;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(135deg, #fff, #fff), linear-gradient(135deg, #A0B8DF, #E2EEFD);
border: 1rpx transparent solid;
}
.navbox{ border-right: 1px solid;
? border-image: -webkit-linear-gradient(#00569D , white , #00569D)1 10 1; /* 控制邊框顏色漸變 */
border-image: -moz-linear-gradient(#00569D , white , #00569D)1 10 1;
border-image: linear-gradient(#00569D , white , #00569D)1 10 1; /* 標(biāo)準(zhǔn)的必須寫在最后 */
}
實(shí)現(xiàn)代碼：
1.文本從左至右顏色漸變實(shí)現(xiàn)代碼：
<!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.邊框從左至右顏色漸變實(shí)現(xiàn)代碼：
<!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>
————————————————
版權(quán)聲明：本文為CSDN博主「a_蓮」的原創(chuàng)文章造虎，遵循CC 4.0 BY-SA版權(quán)協(xié)議傅蹂，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41241504/article/details/87820620
