CSS2026年5月15日

CSS 边框两式：动画渐变条纹与 border-image

用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。

#border #animation #border-image

CSS 边框两式：动画渐变条纹与 border-image

给卡片加边框，不一定只靠 border: 1px solid。纯 CSS 可以用双层背景画出会流动的渐变条纹；有切图素材时，用 border-image 让装饰边框随容器伸缩。两种方案都不依赖 JavaScript，下面分别拆解。

方案一：动画渐变条纹边框

思路是把 border 设为透明，再用两层 background 分别填充内容区和边框区：

内层（padding-box）：纯白底，盖住中间
外层（border-box）：repeating-linear-gradient 画斜向色块条纹

@keyframes 只移动外层背景的 background-position，hover 时条纹就会沿对角线流动。

条纹边框核心 CSS

css

.card {
  --stripe-length: 24px;
  --stripe-width: calc(var(--stripe-length) / 3);
  --stripe-gap: 10px;
  --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);

  padding: 10px;
  border: var(--stripe-width) solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(
        -45deg,
        #2dd4bf 0 var(--stripe-length),
        #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),
        #fb7185 calc(var(--stripe-length) + var(--stripe-gap))
          calc(var(--stripe-length) * 2 + var(--stripe-gap)),
        #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)
      )
      border-box;
}

.card:hover {
  animation: stripe-flow 1s linear infinite;
}

@keyframes stripe-flow {
  to {
    background-position:
      0 0,
      calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);
  }
}

可调参数：--stripe-length 控制色块长度，--stripe-gap 控制白色细缝宽度，改 --stripe-width 等价于改边框粗细。

悬停卡片，观察条纹流动：

动画条纹边框

Live Preview · 可编辑代码

Vue REPL

正在加载代码预览…

方案二：border-image 图片切片边框

有九宫格切图时，border-image 可以把四角固定、四边平铺或拉伸。简写语法：

border-image: url('/demos/css-borders/borderimg.png') 320 round;

等价于：

属性	含义
`border-image-source`	装饰图 URL
`border-image-slice: 320`	从四边向内切 320px（数字无单位 = 像素）
`border-image-repeat: round`	边段重复并缩放以填满，不留空隙

round 适合等宽花纹；repeat 原尺寸重复可能裁切；stretch 拉伸变形但一定铺满。

border-image 简写

css

.box {
  border: 50px solid transparent;
  border-image: url('/demos/css-borders/borderimg.png') 320 round;
  background: #111;
  color: #fff;
  padding: 20px;
}

切换 repeat 模式，对比边框铺法差异：

border-image 切片边框

Live Preview · 可编辑代码

Vue REPL

正在加载代码预览…

小结

无素材、要动效 → 双层 background + repeating-linear-gradient + @keyframes
有切图、要质感 → border-image + 合适的 slice 与 repeat 模式

两者可以组合：内容区用纯色或渐变，边框区分别用 CSS 条纹或图片切片。选哪种取决于设计稿有没有现成九宫格素材。