前端实现纯代码边框渐变色, 不用背景图, 能优化项目加载性能等, 这里需要设置 box 和 in 内外两个容器
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.card-box {
width: 300px;
margin-top: 10px;
border: 4px solid transparent;
border-radius: 12px;
background-image: linear-gradient(#ff0, #00f),
linear-gradient(0deg, rgb(222, 65, 26), rgba(9, 136, 141, 0));
background-origin: border-box;
background-clip: content-box, border-box;
}
.card-box .in {
background: linear-gradient(180deg, #a6edb9 0%, #df6dd1 100%);
border-radius: 8px;
}
</style>
<body>
<div>
<div class="card-box">
<div class="in">
<div>我是文本</div>
<div>我是文本</div>
<div>我是文本</div>
<div>我是文本</div>
<div>我是文本</div>
</div>
</div>
</div>
</body>
</html>