目录
背景说明：设计图有一个这种边框，首先想到的是用border-image设置，但是这种方式出现的角是直角，查询资料了解到，当设置border-image的时候，border-radius就会失效。
效果
代码[demo]
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>圆角边框渐变色</title>
<style type="text/css">
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.demo {
width: 400px;
height: 200px;
border-radius: 50px;
border: 10px solid transparent; /* 关键：设置透明边框 */
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(140deg, rgba(44, 220, 255, 0.8), rgba(255, 41, 41, 0.6));
background-origin: border-box;
background-clip: padding-box, border-box;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>知识点
待补充~