<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border ranbom</title> <style> .rbox { width: 320px; height: 240px; /* border: 3px solid #ccc; */ position: absolute; left: 200px; top: 200px; overflow: hidden; border-radius: 10px; } .rbox .inner { width: 520px; height: 520px; background-image: linear-gradient(-60deg, red, yellow); animation: rbox 3s linear infinite; position: absolute; left: -100px; top: -100px; } .rbox .content { background: white; position: absolute; left: 6px; right: 6px; top: 6px; bottom: 6px; border-radius: 6px; } @keyframes rbox { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class="rbox"> <div class="inner"> </div> <div class="content"> sfsdf </div> </div> </body> </html>