css实现渐变圆角边框照着网上的试了很多，要么背景不透明，要么背景透明但是里面的不是圆角，要么都兼具但是边框颜色不对。

照着网上的试了很多，要么背景不透明，要么背景透明但是里面的不是圆角，要么都兼具但是边框颜色不对。

我这个你直接抄就完了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .css-test {
      background-image: url("/src/assets/img/wallerpaper.jpg");
      background-size: 100% 100%;
      padding: 20px;
      min-height: 100vh;
    }

    .element {
      width: 200px;
      height: 200px;
      text-align: center;
      font-weight: bold;
      color: white;
      border-radius: 20px;
      position: relative;
      background: transparent;
      /* background: linear-gradient(135deg, rgba(255, 126, 95, .5), rgba(254, 180, 123, .5), rgba(134, 227, 206, .5), rgba(212, 165, 165, .5)); */
    }

    .element::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 4px; /* 创建一个内边距，就是边框宽度 */
      background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #d4a5a5);
      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
    }
  </style>
  <body>
    <div class="css-test">
      <div class="element">
        <div>css实现渐变圆角边框</div>
      </div>
    </div>
  </body>
</html>