Safari：background-clip和border-radius不能很好地协同工作

Question

Fiddle

小提琴中的div.button看起来与Chrome / FF中的预期相似，但background-clip和border-radius在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>

Answer 1

您可能需要为渐变指定特定的大小值。 http://dabblet.com/gist/5748608（前缀未写但通过js添加）

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 ;
}

Box-shadow虽然提供了更好的结果。