尴尬的差距使用的box-shadow

Question

时，我使用的CSS的box-shadow工作再上一个圆形按钮内部和外部光晕：

http://codepen.io/interwebjill/pen/mVbXyW

.button-outer { 
     width: 40px; 
     height: 40px; 
     border-radius: 50%; 
     box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, .50); 
     position: absolute; 
    } 

    .button-inner { 
     width: 40px; 
     height: 40px; 
     border-radius: 50%; 
     box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, .45); 
     position: absolute; 
    } 

    .card.activate { 
     box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 0.75); 
    } 

    .button-inner.activate { 
     box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, 1); 
    } 

    .button-outer.activate { 
     box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 1); 
    } 

但我正在逐渐在边界处一个尴尬的缝隙。如果按钮处于打开状态，这一点尤其明显。我尝试过抚摸边框，但这没有帮助。有没有人知道这个问题的解决办法？

顺便说一下，这个脚本是为桌面应用程序，将通过电子固定在Chromium中。所以最好在Chrome中查看。

Answer 1

我倒是建议使用单一元素的按钮和应用多箱阴影对他们说：你描述的问题可以通过额外的两个小人影以最小的利差和半径所掩盖：http://codepen.io/myf/pen/PZYQxB?editors=010

.button { 
     width: 40px; 
     height: 40px; 
     border-radius: 50%; 
     box-shadow: 
      0px 0px 25px 10px rgba(255, 255, 255, .50), 
      inset 0px 0px 25px 15px rgba(255, 255, 255, .45), 
      0px 0px 1px 0px rgba(255, 255, 255, .1), 
      inset 0px 0px 1px 0px rgba(255, 255, 255, .1); 
    } 

    .button.activate { 
     box-shadow: 
      0px 0px 25px 15px rgba(255, 255, 255, 1), 
      inset 0px 0px 25px 15px rgba(255, 255, 255, 1), 
      0px 0px 0px 1px rgba(255, 255, 255, 1), 
      inset 0px 0px 0px 1px rgba(255, 255, 255, 1); 
    } 

我认为你原来的问题在于图形渲染，特别是由边界半径引入的舍入/反褶积毛刺。盒子为矩形时不存在。