相关疑难解决方法(0)

我正在尝试使用css仅旋转边框,但字体图标也在旋转.如何停止图标的旋转并仅使边框？

CSS:

.circle {
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    border: 2px dashed #000;
 -webkit-animation-name: Rotate;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -moz-animation-name: Rotate;
 -moz-animation-duration: 2s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -ms-animation-name: Rotate;
 -ms-animation-duration: 2s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
}
.play {
padding: 20px 30px;
font-size: 56px;
}

@-webkit-keyframes Rotate
{
 from{-webkit-transform:rotate(0deg);}
 to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes Rotate
{
 from{-moz-transform:rotate(0deg);}
 to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate
{
 from{-ms-transform:rotate(0deg);}
 to{-ms-transform:rotate(360deg);}
}

HTML:

<div class="circle">
   <div class="play"><i class="fa fa-play"></i></div>
</div>

这个代码我哪里错了？

DEMO JSFIDDEL

我有以下CSS: -

a.btn.white-grad {
    background: $lgrey;
    color: #313149 !important;
    border: 1px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    float: left;
    @include font-size(26);
    margin: 75px 0;
}

添加border-radius:5px似乎没有做任何事情,我认为这是因为我正在使用边框渐变,有没有办法让我达到所需的5px边框半径？