css - Safari：背景剪辑和边框半径不能很好地协同工作

Question

小提琴

小提琴中的div.button看起来像 Chrome/FF 中的预期，但background-clip在border-radiusSafari 中效果不佳。

代码有问题还是 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 ;
}

盒子阴影虽然给出了更好的结果。