边界半径不适用于边界图像输出

Question

我正在创建 CSS3 加载图标效果，而不是使用 GIF。我已经创建了加载图标效果，但我无法将其制作成圆形。它以方形而不是圆形旋转。边框半径不适用于边框图像属性 ?

HTML

<div id="progress">
    <span class="spinner-icon"></span>
</div>

CSS

#progress {
  pointer-events: none;
}

#progress .spinner-icon {
  width: 30px;
  height: 30px;
  display:block;
  border: solid 2px transparent;
  border-radius:50%;
  -webkit-animation: progress-spinner 600ms linear infinite;
          animation: progress-spinner 600ms linear infinite;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1; 
}

#progress  {
  position: absolute;
}


@-webkit-keyframes progress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes progress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

http://jsfiddle.net/44athund/3/

Answer 1

这不适用于边框图像。正在将半径应用于对象，但不会考虑具有渐变的边界图像。

根据你的情况，我在这里创建了一个 fiddle https://jsfiddle.net/a9dpg582/1/ 我想这就是你想要的。

#progress {
    pointer-events: none;
    position: relative;
}
#progress .spinner-icon::after {
    content: '';
    border-radius: 50%;
    background-color: #FFF;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
}
#progress .spinner-icon {
    width: 30px;
    height: 30px;
    display: block;
    background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-radius: 50%;
    -webkit-animation: progress-spinner 600ms linear infinite;
    animation: progress-spinner 600ms linear infinite;
}
#progress {
    position: absolute;
    border-radius: 50%;
}
@-webkit-keyframes progress-spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes progress-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

边界半径不适用于边界图像输出

border-radius not working with border-image output

html

css

keyframe