怎么用css做一个流动的边框

要实现一个流动的边框，可以通过 CSS3 的 border 属性和动画实现。以下是一个简单的示例：

HTML 代码：

<div class="box">
  <p>这是一个流动的边框</p>
</div>

CSS 代码：

.box {
  position: relative;
  width: 200px;
  height: 100px;
  border: 2px solid #ccc;
  padding: 20px;
}

.box:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #fff;
  z-index: -1;
  animation: flow 2s linear infinite;
}

@keyframes flow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

解释：

1. 首先给 `box` 元素设置一个相对定位，以便于给伪元素 `:before` 设置绝对定位。
2. 给 `box` 元素设置一个普通的边框，颜色为灰色，宽度为 2px。
3. 给 `box:before` 伪元素设置绝对定位，并设置它的边框颜色为白色，宽度为 2px，z-index 为 -1。
4. 给 `box:before` 伪元素设置动画，名称为 `flow`，持续时间为 2s，动画类型为线性，无限循环。
5. 定义动画 `flow`，在 0%、50% 和 100% 三个关键帧设置不同的 `transform` 值，实现边框的流动效果。

这样就可以实现一个简单的流动的边框效果了。您可以根据需要调整边框的颜色、宽度、动画名称等属性来实现更多的变化效果。