在實際開發中，我們經常遇見邊框需要背景漸變的實現要求，那麼如何去實現呢，今天給大家分享依稀幾種情況 1.直角的背景漸變 註意問題：border-image的使用是不能實現圓角的效果，各位需要註意這個屬性 2.圓角的背景漸變 代碼如下：利用偽類元素去實現背景邊的漸變效果，同時我們還可以加上動畫效果，利 ...
在實際開發中，我們經常遇見邊框需要背景漸變的實現要求，那麼如何去實現呢，今天給大家分享依稀幾種情況
1.直角的背景漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border漸變</title>
<style>
button{
background:transparent;
color:#23b7cb;
font-size:15px;
padding:5px 15px;
border:1px transparent solid;
border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;
}
</style>
</head>
<body>
<button>進入平臺</button>
</body>
</html>
註意問題：border-image的使用是不能實現圓角的效果，各位需要註意這個屬性
2.圓角的背景漸變
代碼如下：利用偽類元素去實現背景邊的漸變效果，同時我們還可以加上動畫效果，利用的是transtion:all ease 300ms即可，主要使用了
linear-gradient這個屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border漸變</title>
<style>
button{
color: #23b7cb;
font-size: 15px;
padding: 5px 15px;
background: #fff;
border: 1px transparent solid;
border-radius: 30px;
position: relative;
}
button:after{
content:'';
position: absolute;
top: -3px; bottom: -3px;
left: -3px; right: -3px;
background: linear-gradient(135deg,#000781, #23b7cb);
border-radius: 30px;
content: '';
z-index: -1;
}
</style>
</head>
<body>
<button>進入平臺</button>
</body>
</html>
3. 下邊框漸變
或者 分割線 的邊框漸變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border漸變</title>
<style>
div{
width:200px;
padding-bottom: 15px;
background:transparent;
/*color:#23b7cb;*/
font-size:15px;
padding:5px 15px;
border-bottom:3px transparent solid;
border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;
}
</style>
</head>
<body>
<div>下邊框漸變</div>
</body>
</html>
