网站开发 - 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

没有很好的理解你说的一个需求，所以可能会有偏差，我的理解是 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 图标

Answer 2

可以参考下面实现方案
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