边框渐变色的代码实现

用户12589343139602026-03-13 11:50

前端实现纯代码边框渐变色, 不用背景图, 能优化项目加载性能等, 这里需要设置 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>