Css Safari：背景剪辑和边界半径don'；我们不能很好地合作

小提琴中的

div.button

看起来与Chrome/FF中预期的一样，但是

背景剪辑

和

边框半径

在Safari中不起作用

代码或Safari的行为是否有问题

CSS

div.button {
    width: 100px; height: 100px;
    padding: 8px;

    border-radius: 100px;
    box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
    background-image: -webkit-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
    background-image:    -moz-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
    background-image:     -ms-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
    background-image:      -o-radial-gradient(center center, circle, #8CE2FB, #52D2F8);
    background-image:         radial-gradient(center center, circle, #8CE2FB, #52D2F8);
    -webkit-background-clip: content-box;
    -moz-background-clip: content-box;
    background-clip: content-box;
}

HTML

<div class="button"></div>

---

您可能需要为渐变指定特定的大小值。 （前缀未写入，但通过js添加）

---

方块阴影效果更好。

您的代码是正确的，但它不适合safari的功能。所以，没有太多的选择来调整你的CSS，所以它能理解你想要什么，IMHO。例如：IE9不理解渐变，但得到了方块阴影。如果渐变变成真实图像，请放入背景并用边框或插入阴影隐藏边。：）妥协的问题那只是运气不好。我希望有一天每个浏览器都能像预期的那样工作，尤其是Safari/Explorer。谢谢你的帮助：）总有一天他们会的，过去几年进步了很多

div.button {
   width: 100px; height: 100px;
   padding: 8px;
   border-radius: 100px;
   box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
   background-image: radial-gradient(center,  #8CE2FB 0, #52D2F8  52px, white 52px , white );/* oldest, includes your safari ? */
   background-image: radial-gradient(circle at center,  #8CE2FB 0, #52D2F8  52px, white 52px , white ); /* newest */
}
.bshad {/* box- shadow */
    width: 100px; height: 100px;
    padding: 8px;
    border-radius: 100px;
    box-shadow: 0 0.8px 8px rgba(0,0,0,.3), inset 0 0 1px 8px white, inset 0 0 0 200px #52D2F8 ;
}