css怎么只让边框旋转，里面的其他元素不变

### 使用 CSS 实现边框旋转而内部元素保持不动

为了实现只有边框旋转而内部元素保持静止的效果，可以采用双层结构的方法。具体来说，使用 `::before` 和 `::after` 伪类来构建内外两层结构。

外部容器设置相对定位，并应用透明背景；内部实际显示的内容则放置在一个绝对定位的子元素中[^2]：

.container {
    position: relative;
}

.inner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

对于旋转部分，则是在 `.container` 上附加一个额外的伪元素（如 `::before`），该伪元素作为边框存在。通过给定固定大小以及超出父级范围的部分被裁剪掉的方式模拟出边框效果。接着，在此伪元素上施加基于 `transform-origin` 的中心点旋转动画[^3]：

.container::before {
    content: '';
    display: block;
    position: absolute;
    border: 5px solid black; /* 设置边框样式 */
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    z-index: 1;
    animation: rotateBorder 2s linear infinite;
    transform-origin: center;
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

这样就可以让边框围绕着内容区域做圆周运动的同时不影响其下方的文字或其他组件正常展示。