效果展示
代码部分
<!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>Document</title>
</head>
<body><div class="box">1234</div><style>* {margin: 0;padding: 0;}.box {display: flex;justify-content: center;align-items: center;position: relative;width: 180px;height: 250px;border-radius: 20px;margin: 100px auto;background-color: #000;overflow: hidden;z-index: 0;}.box::before {content: '';position: absolute;z-index: -2;width: 120px;height: 120%;background: linear-gradient(#03fcc6, #ff0296);animation: rotates 3s linear infinite;}.box::after {content: '';position: absolute;z-index: -1;border-radius: 20px;inset: 5px;background-color: #FFF;/* background-color: #0e1538; */}@keyframes rotates {to {transform: rotate(360deg);}}</style>
</body>
</html>
代码解释
这段HTML代码定义了一个简单的页面，包含一个带有样式的div元素。该元素使用CSS样式定义了一个具有渐变背景色、居中显示文本的矩形框。矩形框的外部轮廓由border-radius属性定义为圆形，并通过overflow: hidden属性隐藏溢出部分。在矩形框的前面和后面，使用CSS的::before和::after伪元素分别定义了一个动态旋转的背景和一个内边框。
一般添加上动画即可，但是如果div元素有内容显示就比较麻烦，这时需要调整层级关系以及背景颜色的搭配来简单的达到目的
