示意图:
<!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>