CSS动画块边框半径

动画开始时，边界半径不起作用，动画完成后，边界半径开始起作用，有解决方案吗

HTML:

---

您应该将位置设置为相对或绝对，并在spin360alement中添加z索引。但是真的。。。不要问我为什么，因为你的代码在Firefox中运行良好

.u-p{
显示：块；
位置：相对位置；
溢出：隐藏；
宽度：65px；
高度：65px；
边界半径：100%；
}
.u-p img{
位置：绝对位置；
排名：0；
底部：0；
左：0；
保证金：自动；
宽度：65px；
高度：自动；
最小高度：100%；
最小宽度：65px；
}
.spin360{
位置：相对位置；
z指数：1；
动画名称：spin360；
动画持续时间：1.5s；
}
@关键帧旋转360度{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}

文本。。。

HTML中的元素从文档顶部流向底部。即位于代码顶部的层将显示在标记底部的层之前。您可以选择某个图层并更改其行为。例如，可以使用定位来更改图元的流。在您的情况下，应该添加z-index属性以显示图像的跨度。因为在你的代码图像下面的流。通过编写z索引，可以指定元素的顺序

 .u-p {
    display: block;
    z-index:1;
    position: relative;
    overflow: hidden;
    width:65px;
    height:65px;
    border-radius: 100%;
}

---

此外，我认为这篇短文将更有助于回答有关流量的问题。

可能的重复（我无法确认，因为我正在移动设备上访问，但将

z-index:1

添加到

。u-p

应该可以解决该答案中提到的问题。原因也在那里提供。）如果您的问题是使用特殊浏览器或设备，最好提一下。我在firefox中测试了你的代码，没有问题。@FarzinKanzi:没错。由于Webkit（或Blink）引擎如何创建用于加速网页渲染的层，因此此问题仅在Chrome/Webkit支持的浏览器中发生。虽然在我的链接答案中没有提到浏览器名称，但你可以找到一些我在那里链接的与Chrome相关的文章（在另一个链接中：P）。

.u-p {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    width:65px;
    height:65px;

}
.u-p img {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    margin: auto;
    width: 65px;
    height: auto;
    min-height: 100%;
    min-width: 65px;
}
.spin360 {
  animation-name: spin360;
  animation-duration: 1.5s;
}
@keyframes spin360 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

 .u-p {
    display: block;
    z-index:1;
    position: relative;
    overflow: hidden;
    width:65px;
    height:65px;
    border-radius: 100%;
}