CSS实现重复渐变的边框_css 重复渐变-CSDN博客

本文链接：https://blog.csdn.net/weixin_48771508/article/details/140551961

示意图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .card {
      width: 300px;
      margin: 0 auto;
      font-family: 'Courier New', Courier, monospace;
      color: #333;
      font-style: italic;
      line-height: 1.4;
      border-radius: 10px;
      background:  repeating-linear-gradient(
        -45deg, 
        #e8544d 0 10px, 
        #fff 10px 20px,
        #75adf8 20px 30px,
        #fff 30px 40px
      ) -20px -20px/200% 200%;
      padding: 5px;
      transition: 0.5s;
    }
    .card:hover {
      background-position: 0 0;
    }
    .container {
      padding: 5px;
      border-radius: inherit;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="container">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam veritatis laborum inventore aliquam saepe fugit nisi error, iste deserunt impedit, blanditiis atque dolorum nesciunt. Maxime consequuntur nemo unde odio ullam consectetur reprehenderit explicabo quia. Quo harum pariatur culpa. Voluptate, voluptas voluptates expedita nulla quod optio necessitatibus ipsam doloribus numquam
    </div>
  </div>
</body>
</html>