如何让边框动画适配元素的border-radius属性？

问题分析 #

你当前使用border-image实现锥形渐变边框动画，但border-image属性不支持border-radius，导致圆角无法生效，动画自然也没法适配圆角。

解决方案：伪元素 + CSS Mask 实现 #

通过给容器添加伪元素，用锥形渐变作为伪元素背景，再通过mask属性裁剪出圆角边框形状，同时对渐变角度做动画，即可实现适配圆角的边框旋转效果。

修改后的完整代码 #

CSS 代码

.container {
  height: 150px;
  width: 150px;
  border-radius: 20px;
  background: yellow;
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  animation: borderRotate var(--d) linear infinite forwards;
}

@keyframes borderRotate {
  100% {
    --angle: 420deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

:root {
  --d: 2500ms;
  --angle: 90deg;
  --c1: red;
  --c2: blue;
}

HTML 代码

<div class="container"></div>

方案说明 #

• 伪元素::before模拟边框，继承容器的border-radius，确保圆角生效。
• background: ... border-box让渐变背景覆盖到边框区域。
• mask和mask-composite: xor裁剪出仅边框可见的区域：linear-gradient(#fff 0 0) padding-box保留容器内部区域，另一个全屏渐变和它异或后，仅留下边框部分。
• 动画逻辑和原代码一致，通过修改--angle变量实现锥形渐变旋转。

备选方案：多层背景 + background-clip #

无需伪元素，也可通过多层背景配合background-clip实现：

.container {
  height: 150px;
  width: 150px;
  border-radius: 20px;
  border: 1px solid transparent;
  /* 内层背景覆盖容器内部，外层渐变作为边框 */
  background: linear-gradient(yellow, yellow) padding-box, 
              conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) border-box;
  animation: borderRotate var(--d) linear infinite forwards;
}

@keyframes borderRotate {
  100% {
    --angle: 420deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

:root {
  --d: 2500ms;
  --angle: 90deg;
  --c1: red;
  --c2: blue;
}

该方案通过padding-box和border-box的背景裁剪规则，让内部被黄色背景覆盖，仅露出边框区域的锥形渐变，同时border-radius可正常生效。

内容的提问来源于stack exchange，提问作者hatched