圆角边框渐变色的代码实现前端实现纯代码圆角边框和渐变色, 不用背景图, 能优化项目加载性能等, 这里需要设置边框颜色为

前端实现纯代码圆角边框和渐变色, 不用背景图, 能优化项目加载性能等, 这里需要设置边框颜色为透明色, 然后用背景裁切来实现

<!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;
    border-radius: 12px;
    
    border: 4px solid transparent;
    background-image: linear-gradient(pink, yellow),
      linear-gradient(0deg, blue, green);
    background-origin: border-box;
    background-clip: content-box, border-box;
  }
</style>

<body>
  <div>
    <div class="card-box">
      <div>我是文本</div>
      <div>我是文本</div>
      <div>我是文本</div>
      <div>我是文本</div>
      <div>我是文本</div>
      <div>我是文本</div>
    </div>
  </div>
</body>

</html>