Css IOS的跨浏览器兼容性问题

我的问题出现在CSS3中的动画框阴影。

对于动画，我编写了前缀moz、webkit、o、default，但这不起作用。 有什么问题吗？

.home__number {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 64px;
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
-webkit-animation: home__item1 10s infinite;
-moz-animation: home__item1 10s infinite;
-o-animation: home__item1 10s infinite;
animation: home__item1 10s infinite;
}

@keyframes home__item1 {
0% {
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  box-shadow: 0 -150px 70px -120px #6730ec inset,
   0 -220px 70px -120px #7984ee inset, 0 -280px 70px -120px #a9d2ff inset;
}
25% {
  border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
}
50% {
  border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
  box-shadow: 0 -140px 70px -120px #a9d2ff inset,
   0 -210px 70px -120px #7984ee inset, 0 -280px 70px -120px #6730ec inset;
}
75% {
 border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
}
100% {
 box-shadow: 0 -150px 70px -120px #6730ec inset,
  0 -220px 70px -120px #7984ee inset, 0 -280px 70px -120px #a9d2ff inset;
}

}

---

对于其他关键帧，同样编写。

这不是一个完整的答案，因为我没有解决方法，但这里有一个问题的小探索，以防它有助于您的调查

除去CSS中的所有内容，除了框阴影，我们仍然可以在IOS Safari中看到一个问题，而这个问题在Windows10的边缘上是不存在的。下面是最简单的代码，使用红色、绿色和蓝色作为对比：

div{
宽度：150px；
高度：150像素；
框阴影：
0-150px 70px-120px红色插图，0-220px 70px-120px绿色插图，0-280px 70px-120px蓝色插图；
}

---

这不是一个完整的答案，因为我没有解决办法，但这里有一个问题的小探索，以防它有助于您的调查

除去CSS中的所有内容，除了框阴影，我们仍然可以在IOS Safari中看到一个问题，而这个问题在Windows10的边缘上是不存在的。下面是最简单的代码，使用红色、绿色和蓝色作为对比：

div{
宽度：150px；
高度：150像素；
框阴影：
0-150px 70px-120px红色插图，0-220px 70px-120px绿色插图，0-280px 70px-120px蓝色插图；
}