css边框过渡动画怎么加border-radius?

Question

给图片边框加一个动画，顺时针依次变色，因为图片加了border-radius，要怎么把第一张图和第二张图开始的部分加上圆角。或者换一种实现方案

&.active {
    width: 290px;
    height: 190px;
    position: relative;
  &.active::before, &::after {
    box-sizing: inherit;
    position: absolute;
    content: '';
    border: 4px solid transparent;
    border-radius: 20px !important;
    width: 1px;
    height: 1px;
    z-index: 999;
  }
  &.active::after {
    bottom: 0px;
    right: 0px;
  }
  &.active::before {
    top: 0px;
    left: 0px;
  }
  &.active:hover::before, &.active:hover::after {
    width: 100%;
    height: 100%;
  }

  &.active:hover::before {
    border-top-color: #ff6900;
    border-right-color: #ff6900;
    transition: width 0.5s ease-out 0s, height 0.5s ease-out 0.5s;
  }
  &.active:hover::after {
    border-bottom-color: #ff6900;
    border-left-color: #ff6900;
    transition: border-color 0s ease-out 1s, width 0.5s ease-out 1s, height 0.5s ease-out 1.5s;
  }
}

Answer 1

可以参考下面实现方案
https://csscoco.com/inspiration/#/./background/bg-conic-borde...
https://csscoco.com/inspiration/#/./background/bg-conic-borde...
https://csscoco.com/inspiration/#/./background/bg-linear-bord...
https://codepen.io/alphardex/pen/qBBGxqY
https://codepen.io/alphardex/pen/vYEYGzp

Answer 2

没有很好的理解你说的一个需求，所以可能会有偏差，我的理解是 border 的旋转效果？
单纯修改 border-color 来实现会比较生硬，所以一般考虑其他的方式来实现。

比如说旋转背景的方式：
CodePen Demo

<div class="box">
  <div class='content'></div>
</div>

.box {
  width: 200px;
  height: 100px;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  margin: 12px;
  overflow: hidden;
  position: relative;
}
.box .content {
  width: 100%;
  height: 100%;
  background: #87ceeb;
  border-radius: 8px;
  position: relative;
}
.box:before {
  content: '';
  width: 200px;
  height: 200px;
  background: #ffa500;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  animation: rotateT 3s linear infinite;
}
body {
  background: #dadada;
}
@keyframes rotateT {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(365deg);
  }
}

---

如果单纯是边框闪烁到补全的话，也还是用类似的方式，只不过不需要使用伪类来旋转了，直接在 .box 上把 backgroud 使用渐变色来实现三角形的思路来实现就好了。具体可以借鉴这篇文章 👉 纯CSS渐变绘制 Chrome 图标